feat: better previews
This commit is contained in:
Nevo David
parent
9dc729e2f5
commit
5da52a053d
|
|
@ -0,0 +1,90 @@
|
|||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
import { useFormatting } from '@gitroom/frontend/components/launches/helpers/use.formatting';
|
||||
import clsx from 'clsx';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
import { Chakra_Petch } from 'next/font/google';
|
||||
const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });
|
||||
|
||||
export const GeneralPreviewComponent = () => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const mediaDir = useMediaDirectory();
|
||||
const newValues = useFormatting(topValue, {
|
||||
removeMarkdown: true,
|
||||
saveBreaklines: true,
|
||||
specialFunc: (text: string) => {
|
||||
return text.slice(0, 280);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={clsx('w-[555px] px-[16px]')}>
|
||||
<div className="w-full h-full relative flex flex-col">
|
||||
{newValues.map((value, index) => (
|
||||
<div
|
||||
key={`tweet_${index}`}
|
||||
style={{}}
|
||||
className={clsx(
|
||||
`flex gap-[8px] relative`,
|
||||
index === newValues.length - 1 ? 'pb-[12px]' : 'pb-[24px]'
|
||||
)}
|
||||
>
|
||||
<div className="w-[40px] flex flex-col items-center">
|
||||
<img
|
||||
src={integration?.picture}
|
||||
alt="x"
|
||||
className="rounded-full relative z-[2]"
|
||||
/>
|
||||
{index !== topValue.length - 1 && (
|
||||
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-[#2E3336] absolute top-[10px] z-[1]" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-[4px]">
|
||||
<div className="flex">
|
||||
<div className="h-[22px] text-[15px] font-[700]">
|
||||
{integration?.name}
|
||||
</div>
|
||||
<div className="text-[15px] text-[#1D9BF0] mt-[1px] ml-[2px]">
|
||||
<svg
|
||||
viewBox="0 0 22 22"
|
||||
aria-label="Verified account"
|
||||
role="img"
|
||||
className="max-w-[20px] max-h-[20px] fill-current h-[1.25em]"
|
||||
data-testid="icon-verified"
|
||||
>
|
||||
<g>
|
||||
<path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-[15px] font-[400] text-[#71767b] ml-[4px]">
|
||||
@username
|
||||
</div>
|
||||
</div>
|
||||
<pre className={clsx('text-wrap', chakra.className)}>
|
||||
{value.text}
|
||||
</pre>
|
||||
{!!value?.images?.length && (
|
||||
<div className={clsx("w-full rounded-[16px] overflow-hidden mt-[12px]", value?.images?.length > 3 ? 'grid grid-cols-2 gap-[4px]' : 'flex gap-[4px]')}>
|
||||
{value.images.map((image, index) => (
|
||||
<a
|
||||
key={`image_${index}`}
|
||||
className="flex-1 h-[270px]"
|
||||
href={mediaDir.set(image.path)}
|
||||
target="_blank"
|
||||
>
|
||||
<VideoOrImage
|
||||
autoplay={true}
|
||||
src={mediaDir.set(image.path)}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -32,6 +32,8 @@ import { linkedinCompany } from '@gitroom/frontend/components/launches/helpers/l
|
|||
import { Editor } from '@gitroom/frontend/components/launches/editor';
|
||||
import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
|
||||
import { AddPostButton } from '@gitroom/frontend/components/launches/add.post.button';
|
||||
import { GeneralPreviewComponent } from '@gitroom/frontend/components/launches/general.preview.component';
|
||||
import { capitalize } from 'lodash';
|
||||
|
||||
// Simple component to change back to settings on after changing tab
|
||||
export const SetTab: FC<{ changeTab: () => void }> = (props) => {
|
||||
|
|
@ -277,7 +279,7 @@ export const withProvider = (
|
|||
secondary={showTab !== 1}
|
||||
onClick={changeToEditor}
|
||||
>
|
||||
{editInPlace ? 'Edit globally' : 'Edit only this'}
|
||||
{editInPlace ? 'Edit globally' : `Edit only ${integration?.name} (${capitalize(integration?.identifier.replace('-', ' '))})`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -288,7 +290,7 @@ export const withProvider = (
|
|||
<div className="flex flex-col gap-[20px]">
|
||||
{!existingData?.integration && (
|
||||
<div className="bg-red-800">
|
||||
This will edit only this provider
|
||||
You are now editing only {integration?.name} ({capitalize(integration?.identifier.replace('-', ' '))})
|
||||
</div>
|
||||
)}
|
||||
{InPlaceValue.map((val, index) => (
|
||||
|
|
@ -304,7 +306,7 @@ export const withProvider = (
|
|||
// ...commands
|
||||
// .getCommands()
|
||||
// .filter((f) => f.name !== 'image'),
|
||||
newImage,
|
||||
// newImage,
|
||||
postSelector(date),
|
||||
...linkedinCompany(
|
||||
integration?.identifier!,
|
||||
|
|
@ -396,7 +398,7 @@ export const withProvider = (
|
|||
{(editInPlace ? InPlaceValue : props.value)
|
||||
.map((p) => p.content)
|
||||
.join('').length ? (
|
||||
<PreviewComponent />
|
||||
<GeneralPreviewComponent />
|
||||
) : (
|
||||
<>No Content Yet</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue