feat: editor bug fixes, some previews
This commit is contained in:
Nevo David
parent
90da9d4aff
commit
0d134c0a6f
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
|
|
@ -28,12 +28,26 @@
|
|||
--new-menu-hover: #fff;
|
||||
--menu-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.5);
|
||||
--popup-color: rgba(65, 64, 66, 0.3);
|
||||
--border-preview: transparent;
|
||||
--preview-box-shadow: none;
|
||||
--linkedin-border: #2e3438;
|
||||
--linkedin-bg: #1b1f23;
|
||||
--linkedin-text: #c6c7c8;
|
||||
--facebook-bg: #242526;
|
||||
--facebook-bg-comment: #333334;
|
||||
--instagram-bg: #0b1014;
|
||||
--tiktok-item-bg: #2a2a2a;
|
||||
--tiktok-item-icon-bg: #FFF;
|
||||
--youtube-bg: #0F0F0F;
|
||||
--youtube-button: #F1F1F1;
|
||||
--youtube-action-color: #272727;
|
||||
--youtube-svg-border: #A0A0A0;
|
||||
}
|
||||
.light {
|
||||
--new-back-drop: #2d1b57;
|
||||
--new-settings: #ECEEF1;
|
||||
--new-sep: #D5D9DD;
|
||||
--new-border: #EAECEE;
|
||||
--new-settings: #eceef1;
|
||||
--new-sep: #d5d9dd;
|
||||
--new-border: #eaecee;
|
||||
--new-bgColor: #f0f2f4;
|
||||
--new-bgColorInner: #ffffff;
|
||||
--new-bgLineColor: #e7e9eb;
|
||||
|
|
@ -62,6 +76,23 @@
|
|||
-3px 13px 14px 0 rgba(55, 52, 75, 0.09),
|
||||
-1px 3px 8px 0 rgba(55, 52, 75, 0.1);
|
||||
--popup-color: rgba(55, 37, 97, 0.2);
|
||||
--border-preview: #f1f0f3;
|
||||
--preview-box-shadow: 0 386px 108px 0 rgba(38, 32, 64, 0),
|
||||
0 247px 99px 0 rgba(38, 32, 64, 0.01),
|
||||
0 139px 83px 0 rgba(38, 32, 64, 0.03),
|
||||
0 62px 62px 0 rgba(38, 32, 64, 0.04), 0 15px 34px 0 rgba(38, 32, 64, 0.05);
|
||||
--linkedin-border: #e9e5df;
|
||||
--linkedin-bg: #fff;
|
||||
--linkedin-text: #707070;
|
||||
--facebook-bg: #f1f0f3;
|
||||
--facebook-bg-comment: #f6f6f6;
|
||||
--instagram-bg: #fff;
|
||||
--tiktok-item-bg: #EEF1F0;
|
||||
--tiktok-item-icon-bg: #454645;
|
||||
--youtube-bg: #FFF;
|
||||
--youtube-button: #000;
|
||||
--youtube-action-color: #F1F1F1;
|
||||
--youtube-svg-border: #1A1A1A;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export const GeneralPreviewComponent: FC<{
|
|||
});
|
||||
|
||||
return (
|
||||
<div className={clsx('w-full md:w-[555px]')}>
|
||||
<div className={clsx('w-full p-[15px]')}>
|
||||
<div className="w-full h-full relative flex flex-col">
|
||||
{renderContent.map((value, index) => (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@ export const PickPlatforms: FC<{
|
|||
{integration.identifier === 'youtube' ? (
|
||||
<img
|
||||
src="/icons/platforms/youtube.svg"
|
||||
className="absolute z-10 -bottom-[5px] -end-[5px]"
|
||||
className="absolute z-10 bottom-0 -end-[5px]"
|
||||
width={20}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -288,7 +288,7 @@ export const MenuComponent: FC<
|
|||
<ImageWithFallback
|
||||
fallbackSrc={`/icons/platforms/${integration.identifier}.png`}
|
||||
src={integration.picture || '/no-picture.jpg'}
|
||||
className="rounded-[8px]"
|
||||
className="rounded-[8px] min-w-[36px] min-h-[36px]"
|
||||
alt={integration.identifier}
|
||||
width={36}
|
||||
height={36}
|
||||
|
|
@ -499,7 +499,7 @@ export const LaunchesComponent = () => {
|
|||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all absolute start-0 top-0 w-full h-full overflow-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor'
|
||||
'bg-newBgColorInner p-[20px] flex flex-col gap-[15px] transition-all absolute start-0 top-0 w-full h-full overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-fifth scrollbar-track-newBgColor'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ import {
|
|||
VerticalDividerIcon,
|
||||
NoMediaIcon,
|
||||
} from '@gitroom/frontend/components/ui/icons';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
const Polonto = dynamic(
|
||||
() => import('@gitroom/frontend/components/launches/polonto')
|
||||
);
|
||||
|
|
@ -432,7 +434,7 @@ export const MediaBox: FC<{
|
|||
onClick={addRemoveSelected(media)}
|
||||
>
|
||||
{!!selected.find((p: any) => p.id === media.id) ? (
|
||||
<div className="flex justify-center items-center text-[14px] font-[500] w-[24px] h-[24px] rounded-full bg-[#612BD3] absolute -bottom-[10px] -end-[10px]">
|
||||
<div className="text-white flex justify-center items-center text-[14px] font-[500] w-[24px] h-[24px] rounded-full bg-[#612BD3] absolute -bottom-[10px] -end-[10px]">
|
||||
{selected.findIndex((z: any) => z.id === media.id) + 1}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -492,6 +494,7 @@ export const MediaBox: FC<{
|
|||
export const MultiMediaComponent: FC<{
|
||||
label: string;
|
||||
description: string;
|
||||
mediaNotAvailable?: boolean;
|
||||
dummy: boolean;
|
||||
allData: {
|
||||
content: string;
|
||||
|
|
@ -535,6 +538,7 @@ export const MultiMediaComponent: FC<{
|
|||
dummy,
|
||||
toolBar,
|
||||
information,
|
||||
mediaNotAvailable,
|
||||
} = props;
|
||||
const user = useUser();
|
||||
const modals = useModals();
|
||||
|
|
@ -688,46 +692,50 @@ export const MultiMediaComponent: FC<{
|
|||
</div>
|
||||
{!dummy && (
|
||||
<div className="flex gap-[8px] px-[12px] border-t border-newColColor w-full b1 text-textColor">
|
||||
<div className="flex py-[10px] b2 items-center gap-[4px]">
|
||||
<div
|
||||
onClick={showModal}
|
||||
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
|
||||
>
|
||||
<div className="flex gap-[8px] items-center">
|
||||
<div>
|
||||
<InsertMediaIcon />
|
||||
</div>
|
||||
<div className="text-[10px] font-[600] maxMedia:hidden block">
|
||||
{t('insert_media', 'Insert Media')}
|
||||
{!mediaNotAvailable && (
|
||||
<div className="flex py-[10px] b2 items-center gap-[4px]">
|
||||
<div
|
||||
onClick={showModal}
|
||||
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
|
||||
>
|
||||
<div className="flex gap-[8px] items-center">
|
||||
<div>
|
||||
<InsertMediaIcon />
|
||||
</div>
|
||||
<div className="text-[10px] font-[600] maxMedia:hidden block">
|
||||
{t('insert_media', 'Insert Media')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={designMedia}
|
||||
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
|
||||
>
|
||||
<div className="flex gap-[5px] items-center">
|
||||
<div>
|
||||
<DesignMediaIcon />
|
||||
</div>
|
||||
<div className="text-[10px] font-[600] iconBreak:hidden block">
|
||||
{t('design_media', 'Design Media')}
|
||||
<div
|
||||
onClick={designMedia}
|
||||
className="cursor-pointer h-[30px] rounded-[6px] justify-center items-center flex bg-newColColor px-[8px]"
|
||||
>
|
||||
<div className="flex gap-[5px] items-center">
|
||||
<div>
|
||||
<DesignMediaIcon />
|
||||
</div>
|
||||
<div className="text-[10px] font-[600] iconBreak:hidden block">
|
||||
{t('design_media', 'Design Media')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ThirdPartyMedia allData={allData} onChange={changeMedia} />
|
||||
|
||||
{!!user?.tier?.ai && (
|
||||
<>
|
||||
<AiImage value={text} onChange={changeMedia} />
|
||||
<AiVideo value={text} onChange={changeMedia} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ThirdPartyMedia allData={allData} onChange={changeMedia} />
|
||||
|
||||
{!!user?.tier?.ai && (
|
||||
<>
|
||||
<AiImage value={text} onChange={changeMedia} />
|
||||
<AiVideo value={text} onChange={changeMedia} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-newColColor h-full flex items-center">
|
||||
<VerticalDividerIcon />
|
||||
</div>
|
||||
)}
|
||||
{!mediaNotAvailable && (
|
||||
<div className="text-newColColor h-full flex items-center">
|
||||
<VerticalDividerIcon />
|
||||
</div>
|
||||
)}
|
||||
{!!toolBar && (
|
||||
<div className="flex py-[10px] b2 items-center gap-[4px]">
|
||||
{toolBar}
|
||||
|
|
@ -778,16 +786,28 @@ export const MediaComponent: FC<{
|
|||
setCurrentMedia(settings);
|
||||
}
|
||||
}, []);
|
||||
const [modal, setShowModal] = useState(false);
|
||||
const [mediaModal, setMediaModal] = useState(false);
|
||||
const [currentMedia, setCurrentMedia] = useState(value);
|
||||
const modals = useModals();
|
||||
const mediaDirectory = useMediaDirectory();
|
||||
const closeDesignModal = useCallback(() => {
|
||||
setMediaModal(false);
|
||||
}, [modal]);
|
||||
|
||||
const showDesignModal = useCallback(() => {
|
||||
setMediaModal(true);
|
||||
}, [modal]);
|
||||
modals.openModal({
|
||||
title: 'Media Editor',
|
||||
askClose: false,
|
||||
closeOnEscape: true,
|
||||
fullScreen: true,
|
||||
size: 'calc(100% - 80px)',
|
||||
height: 'calc(100% - 80px)',
|
||||
children: (close) => (
|
||||
<Polonto
|
||||
width={width}
|
||||
height={height}
|
||||
setMedia={changeMedia}
|
||||
closeModal={close}
|
||||
/>
|
||||
),
|
||||
});
|
||||
}, []);
|
||||
const changeMedia = useCallback((m: { path: string; id: string }[]) => {
|
||||
setCurrentMedia(m[0]);
|
||||
onChange({
|
||||
|
|
@ -798,8 +818,18 @@ export const MediaComponent: FC<{
|
|||
});
|
||||
}, []);
|
||||
const showModal = useCallback(() => {
|
||||
setShowModal(!modal);
|
||||
}, [modal]);
|
||||
modals.openModal({
|
||||
title: 'Media Library',
|
||||
askClose: false,
|
||||
closeOnEscape: true,
|
||||
fullScreen: true,
|
||||
size: 'calc(100% - 80px)',
|
||||
height: 'calc(100% - 80px)',
|
||||
children: (close) => (
|
||||
<MediaBox setMedia={changeMedia} closeModal={close} type={type} />
|
||||
),
|
||||
});
|
||||
}, []);
|
||||
const clearMedia = useCallback(() => {
|
||||
setCurrentMedia(undefined);
|
||||
onChange({
|
||||
|
|
@ -811,17 +841,6 @@ export const MediaComponent: FC<{
|
|||
}, [value]);
|
||||
return (
|
||||
<div className="flex flex-col gap-[8px]">
|
||||
{modal && (
|
||||
<MediaBox setMedia={changeMedia} closeModal={showModal} type={type} />
|
||||
)}
|
||||
{mediaModal && !!user?.tier?.ai && (
|
||||
<Polonto
|
||||
width={width}
|
||||
height={height}
|
||||
setMedia={changeMedia}
|
||||
closeModal={closeDesignModal}
|
||||
/>
|
||||
)}
|
||||
<div className="text-[14px]">{label}</div>
|
||||
<div className="text-[12px]">{description}</div>
|
||||
{!!currentMedia && (
|
||||
|
|
|
|||
|
|
@ -129,11 +129,13 @@ export const EditorWrapper: FC<{
|
|||
setLoadedState,
|
||||
selectedIntegration,
|
||||
chars,
|
||||
comments,
|
||||
} = useLaunchStore(
|
||||
useShallow((state) => ({
|
||||
internal: state.internal.find((p) => p.integration.id === state.current),
|
||||
internalFromAll: state.integrations.find((p) => p.id === state.current),
|
||||
global: state.global,
|
||||
comments: state.comments,
|
||||
current: state.current,
|
||||
addRemoveInternal: state.addRemoveInternal,
|
||||
dummy: state.dummy,
|
||||
|
|
@ -343,8 +345,9 @@ export const EditorWrapper: FC<{
|
|||
<div
|
||||
className={clsx(
|
||||
'relative flex-col gap-[20px] flex-1',
|
||||
(items.length === 1 || !canEdit) && 'flex',
|
||||
!canEdit && !isCreateSet && 'bg-newSettings rounded-[12px]'
|
||||
(items.length === 1 || !canEdit || !comments) && 'flex',
|
||||
((!canEdit && !isCreateSet) || !comments) &&
|
||||
'bg-newSettings rounded-[12px]'
|
||||
)}
|
||||
>
|
||||
{isCreateSet && current !== 'global' && (
|
||||
|
|
@ -370,7 +373,7 @@ export const EditorWrapper: FC<{
|
|||
setLoaded(false);
|
||||
addRemoveInternal(current);
|
||||
}}
|
||||
className="text-center absolute w-full h-full left-0 top-0 items-center justify-center flex z-[101] flex-col gap-[16px]"
|
||||
className="text-center absolute w-full h-full p-[20px] left-0 top-0 items-center justify-center flex z-[101] flex-col gap-[16px]"
|
||||
>
|
||||
<div>
|
||||
<div className="w-[54px] h-[54px] rounded-full absolute z-[101] flex justify-center items-center">
|
||||
|
|
@ -398,9 +401,9 @@ export const EditorWrapper: FC<{
|
|||
className={clsx(
|
||||
'relative flex flex-col gap-[20px] flex-1 bg-newSettings',
|
||||
index === 0 && 'rounded-t-[12px]',
|
||||
index === items.length - 1 && 'rounded-b-[12px]',
|
||||
(index === items.length - 1 || !comments) && 'rounded-b-[12px]',
|
||||
!canEdit && !isCreateSet && 'blur-s',
|
||||
!canEdit && index > 0 && 'hidden'
|
||||
((!canEdit && index > 0) || (!comments && index > 0)) && 'hidden'
|
||||
)}
|
||||
>
|
||||
<div className="flex gap-[5px] flex-1 w-full">
|
||||
|
|
@ -411,6 +414,7 @@ export const EditorWrapper: FC<{
|
|||
</div>
|
||||
)}
|
||||
<Editor
|
||||
comments={comments}
|
||||
editorType={editor}
|
||||
allValues={items}
|
||||
onChange={changeValue(index)}
|
||||
|
|
@ -430,14 +434,16 @@ export const EditorWrapper: FC<{
|
|||
chars={chars}
|
||||
childButton={
|
||||
<>
|
||||
{canEdit && items.length - 1 === index ? (
|
||||
{((canEdit && items.length - 1 === index) || !comments) ? (
|
||||
<div className="flex items-center">
|
||||
<div className="flex-1">
|
||||
<AddPostButton
|
||||
num={index}
|
||||
onClick={addValue(index)}
|
||||
postComment={postComment}
|
||||
/>
|
||||
{comments && (
|
||||
<AddPostButton
|
||||
num={index}
|
||||
onClick={addValue(index)}
|
||||
postComment={postComment}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!!internal && !existingData?.integration && (
|
||||
<div
|
||||
|
|
@ -466,21 +472,23 @@ export const EditorWrapper: FC<{
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-[10px] pe-[12px]">
|
||||
<UpDownArrow
|
||||
isUp={index !== 0}
|
||||
isDown={index !== items.length - 1}
|
||||
onChange={changeOrder(index)}
|
||||
/>
|
||||
{items.length > 1 && (
|
||||
<TrashIcon
|
||||
onClick={deletePost(index)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content="Delete Post"
|
||||
className="cursor-pointer text-[#FF3F3F]"
|
||||
{comments && (
|
||||
<div className="flex flex-col items-center gap-[10px] pe-[12px]">
|
||||
<UpDownArrow
|
||||
isUp={index !== 0}
|
||||
isDown={index !== items.length - 1}
|
||||
onChange={changeOrder(index)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{items.length > 1 && (
|
||||
<TrashIcon
|
||||
onClick={deletePost(index)}
|
||||
data-tooltip-id="tooltip"
|
||||
data-tooltip-content="Delete Post"
|
||||
className="cursor-pointer text-[#FF3F3F]"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -500,6 +508,7 @@ export const Editor: FC<{
|
|||
appendImages?: (value: any[]) => void;
|
||||
autoComplete?: boolean;
|
||||
validateChars?: boolean;
|
||||
comments: boolean | 'no-media';
|
||||
identifier?: string;
|
||||
totalChars?: number;
|
||||
selectedIntegration: SelectedIntegrations[];
|
||||
|
|
@ -513,17 +522,14 @@ export const Editor: FC<{
|
|||
pictures,
|
||||
setImages,
|
||||
num,
|
||||
validateChars,
|
||||
identifier,
|
||||
appendImages,
|
||||
selectedIntegration,
|
||||
dummy,
|
||||
chars,
|
||||
childButton,
|
||||
comments,
|
||||
} = props;
|
||||
const user = useUser();
|
||||
const [id] = useState(makeId(10));
|
||||
const newRef = useRef<any>(null);
|
||||
const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
|
||||
const t = useT();
|
||||
const editorRef = useRef<undefined | { editor: any }>();
|
||||
|
|
@ -547,6 +553,9 @@ export const Editor: FC<{
|
|||
|
||||
const paste = useCallback(
|
||||
async (event: ClipboardEvent | File[]) => {
|
||||
if (num > 0 && comments === 'no-media') {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
const clipboardItems = event.clipboardData?.items;
|
||||
if (!clipboardItems) {
|
||||
|
|
@ -563,10 +572,13 @@ export const Editor: FC<{
|
|||
}
|
||||
}
|
||||
},
|
||||
[uppy]
|
||||
[uppy, num, comments]
|
||||
);
|
||||
|
||||
const { getRootProps, isDragActive } = useDropzone({ onDrop });
|
||||
const { getRootProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
noDrag: num > 0 && comments === 'no-media',
|
||||
});
|
||||
|
||||
const valueWithoutHtml = useMemo(() => {
|
||||
return stripHtmlValidation('normal', props.value || '', true);
|
||||
|
|
@ -667,6 +679,7 @@ export const Editor: FC<{
|
|||
<div className="flex bg-newBgColorInner rounded-b-[6px] cursor-default">
|
||||
{setImages && (
|
||||
<MultiMediaComponent
|
||||
mediaNotAvailable={num > 0 && comments === 'no-media'}
|
||||
allData={allValues}
|
||||
text={valueWithoutHtml}
|
||||
label={t('attachments', 'Attachments')}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
'use client';
|
||||
|
||||
import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
|
||||
import React, {
|
||||
FC,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { AddEditModalProps } from '@gitroom/frontend/components/new-launch/add.edit.modal';
|
||||
import clsx from 'clsx';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
|
|
@ -32,6 +39,7 @@ import {
|
|||
TrashIcon,
|
||||
DropdownArrowSmallIcon,
|
||||
} from '@gitroom/frontend/components/ui/icons';
|
||||
import { useHasScroll } from '@gitroom/frontend/components/ui/is.scroll.hook';
|
||||
|
||||
function countCharacters(text: string, type: string): number {
|
||||
if (type !== 'x') {
|
||||
|
|
@ -388,14 +396,17 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
{currentIntegrationText} Settings
|
||||
</div>
|
||||
<div>
|
||||
<ChevronDownIcon rotated={showSettings} className="text-white" />
|
||||
<ChevronDownIcon
|
||||
rotated={showSettings}
|
||||
className="text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="social-settings"
|
||||
className={clsx(
|
||||
!showSettings && 'hidden',
|
||||
'px-[12px] pb-[12px] text-[14px] text-textColor font-[500] max-h-[400px] overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-newColColor scrollbar-track-newBgColorInner'
|
||||
'px-[12px] pb-[12px] text-[14px] text-textColor font-[500] max-h-[300px] overflow-x-hidden overflow-y-auto scrollbar scrollbar-thumb-newBgColorInner scrollbar-track-newColColor'
|
||||
)}
|
||||
/>
|
||||
<style>
|
||||
|
|
@ -413,9 +424,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
<div className="absolute top-0 p-[20px] left-0 w-full h-full overflow-x-hidden overflow-y-scroll scrollbar scrollbar-thumb-newColColor scrollbar-track-newBgColorInner">
|
||||
<Scrollable
|
||||
scrollClasses="!pr-[20px]"
|
||||
className="absolute top-0 p-[20px] pr-[8px] left-0 w-full h-full overflow-x-hidden overflow-y-scroll scrollbar scrollbar-thumb-newColColor scrollbar-track-newBgColorInner"
|
||||
>
|
||||
<ShowAllProviders ref={ref} />
|
||||
</div>
|
||||
</Scrollable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -438,7 +452,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
</div>
|
||||
<div className="pr-[20px] flex items-center justify-end gap-[8px]">
|
||||
{existingData?.integration && (
|
||||
<button onClick={deletePost} className="cursor-pointer flex text-[#FF3F3F] gap-[8px] items-center text-[15px] font-[600]">
|
||||
<button
|
||||
onClick={deletePost}
|
||||
className="cursor-pointer flex text-[#FF3F3F] gap-[8px] items-center text-[15px] font-[600]"
|
||||
>
|
||||
<div>
|
||||
<TrashIcon />
|
||||
</div>
|
||||
|
|
@ -498,7 +515,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
|
|||
disabled={
|
||||
selectedIntegrations.length === 0 || loading || locked
|
||||
}
|
||||
className="disabled:cursor-not-allowed disabled:opacity-80 hidden group-hover:flex absolute bottom-[100%] -left-[12px] p-[12px] w-[206px] bg-newBgColorInner"
|
||||
className="rounded-[8px] z-[300] disabled:cursor-not-allowed disabled:opacity-80 hidden group-hover:flex absolute bottom-[100%] -left-[12px] p-[12px] w-[206px] bg-newBgColorInner"
|
||||
>
|
||||
<div className="text-white rounded-[8px] bg-[#D82D7E] h-[44px] w-full flex justify-center items-center post-now">
|
||||
Post Now
|
||||
|
|
@ -531,3 +548,17 @@ After using the addPostFor{num} it will create a new addPostContentFor{num+ 1} f
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Scrollable: FC<{
|
||||
className: string;
|
||||
scrollClasses: string;
|
||||
children: ReactNode;
|
||||
}> = ({ className, scrollClasses, children }) => {
|
||||
const ref = useRef();
|
||||
const hasScroll = useHasScroll(ref);
|
||||
return (
|
||||
<div className={clsx(className, hasScroll && scrollClasses)} ref={ref}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export const PicksSocialsComponent: FC<{ toolTip?: boolean }> = ({
|
|||
{integration.identifier === 'youtube' ? (
|
||||
<img
|
||||
src="/icons/platforms/youtube.svg"
|
||||
className="absolute z-10 -bottom-[5px] -end-[5px] min-w-[16px]"
|
||||
className="absolute z-10 bottom-0 -end-[5px] min-w-[16px]"
|
||||
width={16}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,338 @@
|
|||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { textSlicer } from '@gitroom/helpers/utils/count.length';
|
||||
import { FC } from 'react';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
|
||||
const Icons = () => {
|
||||
return (
|
||||
<svg
|
||||
width="31"
|
||||
height="16"
|
||||
viewBox="0 0 31 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0Z"
|
||||
fill="url(#paint0_linear_2511_139661)"
|
||||
/>
|
||||
<path
|
||||
d="M12.162 7.338C12.338 7.461 12.5 7.583 12.5 8.012C12.5 8.442 12.271 8.616 12.026 8.737C12.1262 8.90028 12.1581 9.09637 12.115 9.283C12.038 9.627 11.723 9.894 11.443 9.973C11.564 10.167 11.602 10.358 11.458 10.593C11.273 10.888 11.112 11 10.4 11H7.5C6.512 11 6 10.454 6 10V7.665C6 6.435 7.467 5.39 7.467 4.535L7.361 3.47C7.356 3.405 7.369 3.246 7.419 3.2C7.499 3.121 7.72 3 8.054 3C8.272 3 8.417 3.041 8.588 3.123C9.169 3.4 9.32 4.101 9.32 4.665C9.32 4.936 8.906 5.748 8.85 6.029C8.85 6.029 9.717 5.837 10.729 5.83C11.79 5.824 12.478 6.02 12.478 6.672C12.478 6.933 12.259 7.195 12.162 7.338ZM3.6 7H4.4C4.55913 7 4.71174 7.06321 4.82426 7.17574C4.93679 7.28826 5 7.44087 5 7.6V11.4C5 11.5591 4.93679 11.7117 4.82426 11.8243C4.71174 11.9368 4.55913 12 4.4 12H3.6C3.44087 12 3.28826 11.9368 3.17574 11.8243C3.06321 11.7117 3 11.5591 3 11.4V7.6C3 7.44087 3.06321 7.28826 3.17574 7.17574C3.28826 7.06321 3.44087 7 3.6 7Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M23 0C20.8783 0 18.8434 0.842855 17.3431 2.34315C15.8429 3.84344 15 5.87827 15 8C15 10.1217 15.8429 12.1566 17.3431 13.6569C18.8434 15.1571 20.8783 16 23 16C25.1217 16 27.1566 15.1571 28.6569 13.6569C30.1571 12.1566 31 10.1217 31 8C31 5.87827 30.1571 3.84344 28.6569 2.34315C27.1566 0.842855 25.1217 0 23 0Z"
|
||||
fill="url(#paint1_linear_2511_139661)"
|
||||
/>
|
||||
<path
|
||||
d="M25.473 4C23.275 4 23 5.824 23 5.824C23 5.824 22.726 4 20.528 4C18.414 4 17.798 6.222 18.056 7.41C18.736 10.55 23 12.75 23 12.75C23 12.75 27.265 10.55 27.945 7.41C28.202 6.222 27.585 4 25.473 4Z"
|
||||
fill="white"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_2511_139661"
|
||||
x1="8"
|
||||
y1="0"
|
||||
x2="8"
|
||||
y2="16"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#18AFFF" />
|
||||
<stop offset="1" stopColor="#0062DF" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_2511_139661"
|
||||
x1="23"
|
||||
y1="0"
|
||||
x2="23"
|
||||
y2="16"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FF6680" />
|
||||
<stop offset="1" stopColor="#E61739" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const FacebookPreview: FC<{
|
||||
maximumCharacters?: number;
|
||||
}> = (props) => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const current = useLaunchStore((state) => state.current);
|
||||
const mediaDir = useMediaDirectory();
|
||||
|
||||
const renderContent = topValue.map((p) => {
|
||||
const newContent = stripHtmlValidation(
|
||||
'normal',
|
||||
p.content.replace(
|
||||
/<span.*?data-mention-id="([.\s\S]*?)"[.\s\S]*?>([.\s\S]*?)<\/span>/gi,
|
||||
(match, match1, match2) => {
|
||||
return `[[[${match2}]]]`;
|
||||
}
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const { start, end } = textSlicer(
|
||||
integration?.identifier || '',
|
||||
props.maximumCharacters || 10000,
|
||||
newContent
|
||||
);
|
||||
|
||||
const finalValue =
|
||||
newContent
|
||||
.slice(start, end)
|
||||
.replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
|
||||
newContent.slice(end).replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`</mark>`;
|
||||
|
||||
return { text: finalValue, images: p.image };
|
||||
});
|
||||
return (
|
||||
<div className="py-[15px] flex flex-col px-[15px] w-full gap-[20px] bg-bgFacebook rounded-[12px]">
|
||||
<div className="flex gap-[8px]">
|
||||
<div className="w-[36px] h-[36px]">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] w-[36px] h-[36px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col leading-[18px]">
|
||||
<div className="text-[14px] font-[500]">{integration?.name}</div>
|
||||
<div className="text-[12px] font-[400] text-[#A3A3A3] flex gap-[4px] items-center">
|
||||
<span>30m •</span>
|
||||
<span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M5 10C4.30833 10 3.65833 9.86867 3.05 9.606C2.44167 9.34367 1.9125 8.9875 1.4625 8.5375C1.0125 8.0875 0.656333 7.55833 0.394 6.95C0.131333 6.34167 0 5.69167 0 5C0 4.30833 0.131333 3.65833 0.394 3.05C0.656333 2.44167 1.0125 1.9125 1.4625 1.4625C1.9125 1.0125 2.44167 0.656167 3.05 0.3935C3.65833 0.131167 4.30833 0 5 0C5.69167 0 6.34167 0.131167 6.95 0.3935C7.55833 0.656167 8.0875 1.0125 8.5375 1.4625C8.9875 1.9125 9.34367 2.44167 9.606 3.05C9.86867 3.65833 10 4.30833 10 5C10 5.69167 9.86867 6.34167 9.606 6.95C9.34367 7.55833 8.9875 8.0875 8.5375 8.5375C8.0875 8.9875 7.55833 9.34367 6.95 9.606C6.34167 9.86867 5.69167 10 5 10ZM4.5 8.975V8C4.225 8 3.98967 7.90217 3.794 7.7065C3.598 7.5105 3.5 7.275 3.5 7V6.5L1.1 4.1C1.075 4.25 1.052 4.4 1.031 4.55C1.01033 4.7 1 4.85 1 5C1 6.00833 1.33133 6.89167 1.994 7.65C2.65633 8.40833 3.49167 8.85 4.5 8.975ZM7.95 7.7C8.11667 7.51667 8.26667 7.31867 8.4 7.106C8.53333 6.89367 8.64383 6.67283 8.7315 6.4435C8.81883 6.2145 8.8855 5.97917 8.9315 5.7375C8.97717 5.49583 9 5.25 9 5C9 4.18333 8.773 3.4375 8.319 2.7625C7.86467 2.0875 7.25833 1.6 6.5 1.3V1.5C6.5 1.775 6.40217 2.01033 6.2065 2.206C6.0105 2.402 5.775 2.5 5.5 2.5H4.5V3.5C4.5 3.64167 4.45217 3.76033 4.3565 3.856C4.2605 3.952 4.14167 4 4 4H3V5H6C6.14167 5 6.2605 5.04783 6.3565 5.1435C6.45217 5.2395 6.5 5.35833 6.5 5.5V7H7C7.21667 7 7.4125 7.0645 7.5875 7.1935C7.7625 7.32283 7.88333 7.49167 7.95 7.7Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-[14px] font-[400] whitespace-pre-line"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: renderContent?.[0]?.text,
|
||||
}}
|
||||
/>
|
||||
{!!renderContent?.[0]?.images?.length && (
|
||||
<div className="h-[280px] -mx-[15px] overflow-hidden flex">
|
||||
{renderContent?.[0]?.images.map((image, index) => (
|
||||
<a
|
||||
key={`image_${index}`}
|
||||
className="flex-1"
|
||||
href={mediaDir.set(image.path)}
|
||||
target="_blank"
|
||||
>
|
||||
<VideoOrImage autoplay={true} src={mediaDir.set(image.path)} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex text-textLinkedin text-[12px] font-[400] items-center">
|
||||
<div className="flex flex-1 gap-[10px] items-center">
|
||||
<Icons />
|
||||
<div className="">You & 12 other</div>
|
||||
</div>
|
||||
<div className="gap-[9px] items-center flex">
|
||||
<div>20 Comments</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-[8px] flex text-[14px] font-[700] px-[32px] justify-between border-t border-borderLinkedin text-textLinkedin">
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.2983 12.23C20.5762 12.435 20.832 12.6383 20.832 13.3533C20.832 14.07 20.4705 14.36 20.0836 14.5617C20.2417 14.8338 20.2922 15.1606 20.2241 15.4717C20.1026 16.045 19.6052 16.49 19.1631 16.6217C19.3541 16.945 19.4141 17.2633 19.1868 17.655C18.8947 18.1467 18.6405 18.3333 17.5162 18.3333H12.9373C11.3773 18.3333 10.5689 17.4233 10.5689 16.6667V12.775C10.5689 10.725 12.8852 8.98333 12.8852 7.55833L12.7178 5.78333C12.7099 5.675 12.7305 5.41 12.8094 5.33333C12.9357 5.20167 13.2847 5 13.812 5C14.1562 5 14.3852 5.06833 14.6552 5.205C15.5726 5.66667 15.811 6.835 15.811 7.775C15.811 8.22667 15.1573 9.58 15.0689 10.0483C15.0689 10.0483 16.4378 9.72833 18.0357 9.71667C19.711 9.70667 20.7973 10.0333 20.7973 11.12C20.7973 11.555 20.4515 11.9917 20.2983 12.23ZM6.7794 11.6667H8.04256C8.29382 11.6667 8.53478 11.772 8.71245 11.9596C8.89011 12.1471 8.98993 12.4015 8.98993 12.6667V19C8.98993 19.2652 8.89011 19.5196 8.71245 19.7071C8.53478 19.8946 8.29382 20 8.04256 20H6.7794C6.52814 20 6.28718 19.8946 6.10951 19.7071C5.93184 19.5196 5.83203 19.2652 5.83203 19V12.6667C5.83203 12.4015 5.93184 12.1471 6.10951 11.9596C6.28718 11.772 6.52814 11.6667 6.7794 11.6667Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div>Like</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_2511_139673"
|
||||
style={{ maskType: 'alpha' }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="-1"
|
||||
y="2"
|
||||
width="21"
|
||||
height="21"
|
||||
>
|
||||
<rect
|
||||
x="-0.195312"
|
||||
y="2.88281"
|
||||
width="19.6964"
|
||||
height="19.6964"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_2511_139673)">
|
||||
<path
|
||||
d="M1.44531 20.9371V6.1648C1.44531 5.71343 1.60617 5.32689 1.92787 5.00518C2.24903 4.68402 2.6353 4.52344 3.08668 4.52344H16.2176C16.669 4.52344 17.0555 4.68402 17.3772 5.00518C17.6984 5.32689 17.859 5.71343 17.859 6.1648V16.013C17.859 16.4644 17.6984 16.8509 17.3772 17.1726C17.0555 17.4938 16.669 17.6544 16.2176 17.6544H4.72805L1.44531 20.9371ZM3.08668 16.9773L4.05098 16.013H16.2176V6.1648H3.08668V16.9773Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div>Comments</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.21168 20.2107C4.14582 20.2111 4.08035 20.2005 4.01793 20.1795C3.88741 20.1371 3.77445 20.0529 3.69651 19.94C3.61857 19.827 3.57998 19.6915 3.58668 19.5545C3.58668 19.4607 4.23043 10.3857 13.3304 9.6732V6.4107C13.3303 6.28645 13.3673 6.16498 13.4365 6.06181C13.5058 5.95864 13.6042 5.87846 13.7192 5.8315C13.8343 5.78455 13.9607 5.77295 14.0824 5.79819C14.2041 5.82343 14.3154 5.88436 14.4023 5.9732L20.5711 12.2732C20.6856 12.39 20.7497 12.5471 20.7497 12.7107C20.7497 12.8743 20.6856 13.0314 20.5711 13.1482L14.4023 19.4482C14.3154 19.537 14.2041 19.598 14.0824 19.6232C13.9607 19.6485 13.8343 19.6369 13.7192 19.5899C13.6042 19.5429 13.5058 19.4628 13.4365 19.3596C13.3673 19.2564 13.3303 19.135 13.3304 19.0107V15.8107C7.25543 16.042 4.76481 19.8732 4.73981 19.9201C4.68342 20.0091 4.60544 20.0825 4.5131 20.1333C4.42076 20.1841 4.31708 20.2107 4.21168 20.2107ZM14.5804 7.94195V10.2576C14.5805 10.4196 14.5177 10.5754 14.4052 10.692C14.2927 10.8086 14.1392 10.8769 13.9773 10.8826C8.08981 11.0982 5.98356 15.0201 5.22731 17.542C6.78981 16.192 9.57418 14.542 13.9179 14.542H13.9461C14.1118 14.542 14.2708 14.6078 14.388 14.725C14.5052 14.8422 14.5711 15.0012 14.5711 15.167V17.4826L19.2586 12.7138L14.5804 7.94195Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div>Share</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderContent.length > 1 && (
|
||||
<>
|
||||
<div className="flex items-center">
|
||||
<div className="text-[14px] font-[700]">Most relevant</div>
|
||||
<div>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.5437 8L7.4563 8C7.05059 8 6.84741 8.56798 7.13429 8.90016L9.67799 11.8456C9.85583 12.0515 10.1442 12.0515 10.322 11.8456L12.8657 8.90016C13.1526 8.56798 12.9494 8 12.5437 8Z"
|
||||
fill="#A3A3A3"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{renderContent.slice(1).map((value, index) => (
|
||||
<div key={index} className="flex flex-col gap-[12px]">
|
||||
<div className="flex gap-[6px] leading-[17px]">
|
||||
<div className="h-[34px]">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] h-[34px] w-[34px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[6px] min-w-[150px]">
|
||||
<div className="flex flex-col gap-[4px] bg-bgCommentFacebook py-[8px] px-[12px] rounded-[12px]">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-[6px]">
|
||||
<div className="text-[13px] font-[500]">
|
||||
{integration?.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="whitespace-pre-line text-[14px] font-[400]"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: value.text,
|
||||
}}
|
||||
/>
|
||||
{!!value.images?.length && (
|
||||
<div className="h-[100px] mt-[12px] -mx-[15px] overflow-hidden flex">
|
||||
{value.images.map((image, index) => (
|
||||
<a
|
||||
key={`image_${index}`}
|
||||
className="flex-1"
|
||||
href={mediaDir.set(image.path)}
|
||||
target="_blank"
|
||||
>
|
||||
<VideoOrImage
|
||||
autoplay={true}
|
||||
src={mediaDir.set(image.path)}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex font-[400] text-[12px] text-textLinkedin items-center">
|
||||
<div className="flex gap-[16px] flex-1">
|
||||
<div className="font-[700]">9h</div>
|
||||
<div className="font-[700]">Like</div>
|
||||
<div className="font-[700]">Reply</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px]">
|
||||
<div>2</div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0Z"
|
||||
fill="url(#paint0_linear_2511_139920)"
|
||||
/>
|
||||
<path
|
||||
d="M10.473 4C8.275 4 8 5.824 8 5.824C8 5.824 7.726 4 5.528 4C3.414 4 2.798 6.222 3.056 7.41C3.736 10.55 8 12.75 8 12.75C8 12.75 12.265 10.55 12.945 7.41C13.202 6.222 12.585 4 10.473 4Z"
|
||||
fill="white"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_2511_139920"
|
||||
x1="8"
|
||||
y1="0"
|
||||
x2="8"
|
||||
y2="16"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FF6680" />
|
||||
<stop offset="1" stopColor="#E61739" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -7,6 +7,7 @@ import {
|
|||
import { FacebookDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/facebook.dto';
|
||||
import { Input } from '@gitroom/react/form/input';
|
||||
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
|
||||
import { FacebookPreview } from '@gitroom/frontend/components/new-launch/providers/facebook/facebook.preview';
|
||||
|
||||
export const FacebookSettings = () => {
|
||||
const { register } = useSettings();
|
||||
|
|
@ -25,7 +26,7 @@ export default withProvider({
|
|||
postComment: PostComment.COMMENT,
|
||||
minimumCharacters: [],
|
||||
SettingsComponent: FacebookSettings,
|
||||
CustomPreviewComponent: undefined,
|
||||
CustomPreviewComponent: FacebookPreview,
|
||||
dto: FacebookDto,
|
||||
checkValidity: undefined,
|
||||
maximumCharacters: 63206,
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ interface CharacterCondition {
|
|||
}
|
||||
|
||||
export const withProvider = function <T extends object>(params: {
|
||||
comments?: boolean | 'no-media';
|
||||
postComment: PostComment;
|
||||
minimumCharacters: CharacterCondition[];
|
||||
SettingsComponent: FC<{
|
||||
|
|
@ -84,7 +85,6 @@ export const withProvider = function <T extends object>(params: {
|
|||
date,
|
||||
isGlobal,
|
||||
tab,
|
||||
setTab,
|
||||
setTotalChars,
|
||||
justCurrent,
|
||||
allIntegrations,
|
||||
|
|
@ -92,20 +92,23 @@ export const withProvider = function <T extends object>(params: {
|
|||
setEditor,
|
||||
dummy,
|
||||
setChars,
|
||||
setComments,
|
||||
setHide
|
||||
} = useLaunchStore(
|
||||
useShallow((state) => ({
|
||||
date: state.date,
|
||||
tab: state.tab,
|
||||
setTab: state.setTab,
|
||||
global: state.global,
|
||||
dummy: state.dummy,
|
||||
internal: state.internal.find((p) => p.integration.id === props.id),
|
||||
integrations: state.selectedIntegrations,
|
||||
setHide: state.setHide,
|
||||
allIntegrations: state.integrations,
|
||||
justCurrent: state.current,
|
||||
current: state.current === props.id,
|
||||
isGlobal: state.current === 'global',
|
||||
setCurrent: state.setCurrent,
|
||||
setComments: state.setComments,
|
||||
setTotalChars: state.setTotalChars,
|
||||
setPostComment: state.setPostComment,
|
||||
setEditor: state.setEditor,
|
||||
|
|
@ -133,12 +136,14 @@ export const withProvider = function <T extends object>(params: {
|
|||
);
|
||||
|
||||
if (isGlobal) {
|
||||
setComments(true);
|
||||
setPostComment(PostComment.ALL);
|
||||
setTotalChars(0);
|
||||
setEditor('normal');
|
||||
}
|
||||
|
||||
if (current) {
|
||||
setComments(typeof params.comments === 'undefined' ? true : params.comments);
|
||||
setEditor(selectedIntegration?.integration.editor);
|
||||
setPostComment(postComment);
|
||||
setTotalChars(
|
||||
|
|
@ -217,12 +222,12 @@ export const withProvider = function <T extends object>(params: {
|
|||
)
|
||||
),
|
||||
fix: () => {
|
||||
setTab(1);
|
||||
setCurrent(props.id);
|
||||
setHide(true);
|
||||
},
|
||||
preview: () => {
|
||||
setTab(0);
|
||||
setCurrent(props.id);
|
||||
setHide(true);
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
@ -255,7 +260,7 @@ export const withProvider = function <T extends object>(params: {
|
|||
}}
|
||||
>
|
||||
<FormProvider {...form}>
|
||||
<div className={current ? '' : 'hidden'}>
|
||||
<div className={clsx('border border-borderPreview rounded-[12px] shadow-previewShadow', !current && 'hidden')}>
|
||||
{current &&
|
||||
(tab === 0 ||
|
||||
(!SettingsComponent && !data?.internalPlugs?.length)) &&
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.v
|
|||
import { InstagramDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/instagram.dto';
|
||||
import { InstagramCollaboratorsTags } from '@gitroom/frontend/components/new-launch/providers/instagram/instagram.tags';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { InstagramPreview } from '@gitroom/frontend/components/new-launch/providers/instagram/instagram.preview';
|
||||
const postType = [
|
||||
{
|
||||
value: 'post',
|
||||
|
|
@ -57,7 +58,7 @@ export default withProvider<InstagramDto>({
|
|||
postComment: PostComment.COMMENT,
|
||||
minimumCharacters: [],
|
||||
SettingsComponent: InstagramCollaborators,
|
||||
CustomPreviewComponent: undefined,
|
||||
CustomPreviewComponent: InstagramPreview,
|
||||
dto: InstagramDto,
|
||||
checkValidity: async ([firstPost, ...otherPosts], settings) => {
|
||||
if (!firstPost.length) {
|
||||
|
|
@ -92,4 +93,5 @@ export default withProvider<InstagramDto>({
|
|||
return true;
|
||||
},
|
||||
maximumCharacters: 2200,
|
||||
comments: 'no-media'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { textSlicer } from '@gitroom/helpers/utils/count.length';
|
||||
import { FC } from 'react';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
import { SliderComponent } from '@gitroom/frontend/components/third-parties/slider.component';
|
||||
|
||||
export const InstagramPreview: FC<{
|
||||
maximumCharacters?: number;
|
||||
}> = (props) => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const current = useLaunchStore((state) => state.current);
|
||||
const mediaDir = useMediaDirectory();
|
||||
|
||||
const renderContent = topValue.map((p) => {
|
||||
const newContent = stripHtmlValidation(
|
||||
'normal',
|
||||
p.content.replace(
|
||||
/<span.*?data-mention-id="([.\s\S]*?)"[.\s\S]*?>([.\s\S]*?)<\/span>/gi,
|
||||
(match, match1, match2) => {
|
||||
return `[[[${match2}]]]`;
|
||||
}
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const { start, end } = textSlicer(
|
||||
integration?.identifier || '',
|
||||
props.maximumCharacters || 10000,
|
||||
newContent
|
||||
);
|
||||
|
||||
const finalValue =
|
||||
`<strong class="text-[15px] font-[600]">${integration?.name} </strong>` +
|
||||
newContent
|
||||
.slice(start, end)
|
||||
.replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
|
||||
newContent.slice(end).replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`</mark>`;
|
||||
|
||||
return { text: finalValue, images: p.image };
|
||||
});
|
||||
return (
|
||||
<div className="py-[10px] flex flex-col px-[15px] w-full gap-[10px] bg-bgInstagram rounded-[12px]">
|
||||
<div className="flex gap-[10px] items-center">
|
||||
<div className="w-[36px] h-[36px]">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] w-[36px] h-[36px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col leading-[18px]">
|
||||
<div className="text-[15px] font-[600]">{integration?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
{!!renderContent?.[0]?.images?.length && (
|
||||
<SliderComponent
|
||||
className="h-[585px] rounded-[8px] overflow-hidden"
|
||||
list={renderContent?.[0]?.images.map((image, index) => (
|
||||
<a
|
||||
key={`image_${index}`}
|
||||
className="flex-1"
|
||||
href={mediaDir.set(image.path)}
|
||||
target="_blank"
|
||||
>
|
||||
<VideoOrImage
|
||||
autoplay={true}
|
||||
src={mediaDir.set(image.path)}
|
||||
/>
|
||||
</a>
|
||||
))}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="text-[14px] font-[400] whitespace-pre-line"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: renderContent?.[0]?.text,
|
||||
}}
|
||||
/>
|
||||
<div className="py-[8px] text-textColor flex text-[14px] font-[700] gap-[10.5px]">
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="22"
|
||||
height="20"
|
||||
viewBox="0 0 22 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M10.7232 18.2722C10.7232 18.2722 0.792969 12.7112 0.792969 5.95866C0.792969 4.76493 1.20656 3.60807 1.96337 2.68491C2.72018 1.76175 3.77346 1.12932 4.94401 0.895206C6.11455 0.661097 7.33006 0.839776 8.38371 1.40084C9.43737 1.96191 10.2641 2.87071 10.7232 3.97261V3.97261C11.1823 2.87071 12.0091 1.96191 13.0627 1.40084C14.1164 0.839776 15.3319 0.661097 16.5024 0.895206C17.673 1.12932 18.7263 1.76175 19.4831 2.68491C20.2399 3.60807 20.6535 4.76493 20.6535 5.95866C20.6535 12.7112 10.7232 18.2722 10.7232 18.2722Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.58884"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<div>121</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 26 26"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M4.5067 17.576C3.3239 15.5805 2.91017 13.2218 3.34318 10.9428C3.7762 8.66377 5.02618 6.6212 6.85846 5.1985C8.69075 3.7758 10.9793 3.07083 13.2946 3.21592C15.6098 3.36102 17.7924 4.34621 19.4328 5.98653C21.0731 7.62686 22.0583 9.80951 22.2034 12.1247C22.3485 14.44 21.6435 16.7285 20.2208 18.5608C18.7981 20.3931 16.7555 21.6431 14.4765 22.0761C12.1975 22.5091 9.83884 22.0954 7.84327 20.9126V20.9126L4.54642 21.846C4.41135 21.8855 4.26814 21.888 4.13179 21.8531C3.99545 21.8182 3.871 21.7473 3.77149 21.6478C3.67197 21.5483 3.60106 21.4238 3.56619 21.2875C3.53131 21.1512 3.53375 21.0079 3.57326 20.8729L4.5067 17.576Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.58884"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<div>32</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center flex-1">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 26 26"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M20.884 3.56475L2.37397 8.77813C2.21641 8.82121 2.07595 8.91181 1.97174 9.0376C1.86752 9.16339 1.80462 9.31824 1.79159 9.48107C1.77857 9.6439 1.81605 9.80679 1.89894 9.94754C1.98183 10.0883 2.1061 10.2001 2.25481 10.2677L10.7551 14.2894C10.9216 14.3665 11.0553 14.5003 11.1325 14.6668L15.1542 23.1671C15.2218 23.3158 15.3336 23.44 15.4743 23.5229C15.6151 23.6058 15.778 23.6433 15.9408 23.6303C16.1036 23.6172 16.2585 23.5543 16.3843 23.4501C16.5101 23.3459 16.6007 23.2055 16.6437 23.0479L21.8571 4.53791C21.8966 4.40284 21.8991 4.25962 21.8642 4.12328C21.8293 3.98694 21.7584 3.86249 21.6589 3.76297C21.5594 3.66346 21.4349 3.59255 21.2986 3.55767C21.1622 3.5228 21.019 3.52524 20.884 3.56475V3.56475Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.58884"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11.0117 14.4084L15.5002 9.91992"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.58884"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="26"
|
||||
viewBox="0 0 26 26"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M19.0662 22.2443L12.7108 18.2722L6.35547 22.2443V4.76708C6.35547 4.55638 6.43917 4.35432 6.58815 4.20534C6.73713 4.05635 6.9392 3.97266 7.14989 3.97266H18.2718C18.4825 3.97266 18.6845 4.05635 18.8335 4.20534C18.9825 4.35432 19.0662 4.55638 19.0662 4.76708V22.2443Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.58884"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{renderContent.length > 1 && (
|
||||
<>
|
||||
{renderContent.slice(1).map((value, index) => (
|
||||
<div key={index} className="flex flex-col gap-[12px]">
|
||||
<div className="flex gap-[10px] leading-[17px]">
|
||||
<div className="h-[34px]">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] h-[34px] w-[34px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[6px] flex-1">
|
||||
<div className="flex gap-[4px] py-[8px]">
|
||||
<div
|
||||
className="whitespace-pre-line text-[14px] font-[400] flex-1"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: value.text,
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M10 16.875C10 16.875 2.1875 12.5 2.1875 7.18751C2.1875 6.24836 2.51289 5.33821 3.1083 4.61193C3.70371 3.88564 4.53236 3.38808 5.45328 3.2039C6.37419 3.01971 7.33047 3.16029 8.15943 3.6017C8.98838 4.04311 9.63879 4.7581 10 5.62501V5.62501C10.3612 4.7581 11.0116 4.04311 11.8406 3.6017C12.6695 3.16029 13.6258 3.01971 14.5467 3.2039C15.4676 3.38808 16.2963 3.88564 16.8917 4.61193C17.4871 5.33821 17.8125 6.24836 17.8125 7.18751C17.8125 12.5 10 16.875 10 16.875Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.58884"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex font-[400] text-[12px] text-textLinkedin items-center">
|
||||
<div className="flex gap-[16px] flex-1">
|
||||
<div className="font-[700]">30m</div>
|
||||
<div className="font-[700]">8 Likes</div>
|
||||
<div className="font-[700]">Reply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,513 @@
|
|||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { textSlicer } from '@gitroom/helpers/utils/count.length';
|
||||
import { FC } from 'react';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
|
||||
const Icons = () => {
|
||||
return (
|
||||
<svg
|
||||
width={71}
|
||||
height={22}
|
||||
viewBox="0 0 71 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-bgLinkedin"
|
||||
>
|
||||
<rect
|
||||
x={1.0625}
|
||||
y={1.27539}
|
||||
width={18.7109}
|
||||
height={18.7109}
|
||||
rx={9.35544}
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.12624}
|
||||
/>
|
||||
<path
|
||||
d="M10.4444 19.7508C15.682 19.7508 19.9279 15.6014 19.9279 10.4828C19.9279 5.36425 15.682 1.21484 10.4444 1.21484C5.20684 1.21484 0.960938 5.36425 0.960938 10.4828C0.960938 15.6014 5.20684 19.7508 10.4444 19.7508Z"
|
||||
fill="#1485BD"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M15.7769 9.48947H15.0318C14.964 9.48947 14.8286 9.23791 14.4899 8.88043C13.9886 8.35083 13.4331 7.6756 13.0402 7.30488C12.0654 6.47806 11.2686 5.46989 10.6965 4.33913C10.3713 3.66389 10.3442 3.35938 9.68038 3.35938C9.41819 3.39246 9.17864 3.52159 9.01014 3.72067C8.84164 3.91975 8.75676 4.17392 8.77267 4.43181C8.77267 4.61717 8.86751 5.26593 8.90815 5.49101C9.19833 6.52618 9.65567 7.50947 10.2629 8.40379H10.9945H5.19604C5.03181 8.40143 4.86888 8.43263 4.71771 8.49541C4.56654 8.55818 4.43047 8.65114 4.31821 8.76832C4.20596 8.88551 4.12001 9.02432 4.06587 9.17587C4.01173 9.32742 3.9906 9.48835 4.00383 9.64835C4.02471 9.95855 4.16748 10.2489 4.40229 10.4586C4.63709 10.6683 4.94577 10.7812 5.26378 10.7737H5.48055C5.34176 10.7772 5.20503 10.8073 5.07816 10.8624C4.95129 10.9175 4.83678 10.9965 4.74116 11.0948C4.64554 11.1932 4.57069 11.309 4.52089 11.4357C4.47108 11.5623 4.44731 11.6973 4.45091 11.8329C4.45326 12.0997 4.55728 12.3561 4.74266 12.5519C4.92804 12.7478 5.18147 12.8691 5.45345 12.8921C5.28789 13.0159 5.16238 13.1837 5.09194 13.3755C5.0215 13.5672 5.00913 13.7747 5.05632 13.9731C5.10351 14.1716 5.20824 14.3525 5.35797 14.4942C5.50771 14.6359 5.69609 14.7325 5.90053 14.7722C5.77072 14.9924 5.72737 15.2513 5.7786 15.5004C5.84797 15.745 5.99897 15.9599 6.2076 16.111C6.41624 16.2621 6.67055 16.3408 6.93017 16.3345H10.0326C10.4391 16.3345 10.8441 16.2842 11.2384 16.1889L13.1622 15.6328H15.7363C17.1181 15.5798 17.4839 9.48947 15.7769 9.48947Z"
|
||||
fill="#E6F7FF"
|
||||
/>
|
||||
<path
|
||||
d="M9.66218 8.40402H5.16429C4.99306 8.40245 4.82349 8.43696 4.66712 8.50518C4.51076 8.5734 4.37127 8.67374 4.25814 8.79938C4.14501 8.92501 4.06091 9.07298 4.01154 9.23323C3.96218 9.39347 3.94872 9.56223 3.97208 9.72801C3.99629 10.0359 4.14049 10.3229 4.37495 10.5298C4.6094 10.7368 4.9162 10.8479 5.23203 10.8402H5.4488C5.31001 10.8436 5.17328 10.8737 5.04641 10.9288C4.91954 10.9839 4.80503 11.0629 4.70941 11.1613C4.61379 11.2596 4.53894 11.3754 4.48914 11.5021C4.43933 11.6287 4.41556 11.7637 4.41916 11.8994C4.42415 12.1667 4.52871 12.4231 4.71326 12.6205C4.89781 12.818 5.14969 12.9428 5.4217 12.9718C5.29214 13.0711 5.18712 13.1977 5.11442 13.3421C5.04172 13.4865 5.0032 13.645 5.00172 13.8059C5.0024 14.0543 5.09018 14.2949 5.25043 14.4876C5.41069 14.6804 5.63372 14.8136 5.88233 14.8651C5.75158 15.0898 5.70828 15.3531 5.7604 15.6065C5.83228 15.8487 5.98435 16.0606 6.19275 16.2092C6.40116 16.3577 6.65411 16.4345 6.91196 16.4274H10.0144C10.4209 16.4274 10.8259 16.3771 11.2202 16.2818L13.144 15.6595H15.7181C17.0728 15.6595 17.4386 9.51617 15.7181 9.51617C15.4699 9.52953 15.2211 9.52953 14.9729 9.51617C14.9052 9.51617 14.7697 9.26461 14.431 8.90714C13.9297 8.37754 13.3743 7.7023 12.9814 7.33158C12.0197 6.49714 11.2369 5.48461 10.6783 4.3526C10.5707 4.10277 10.4244 3.87057 10.2447 3.66412C10.0191 3.47868 9.72796 3.38726 9.43402 3.40955C9.14008 3.43183 8.86686 3.56604 8.67318 3.78328C8.53278 3.93167 8.41835 4.10165 8.33449 4.2864C8.27968 4.41424 8.23881 4.54738 8.21256 4.68359C8.17621 5.05687 8.20832 5.4335 8.30739 5.79575C8.3941 6.17706 8.51738 6.5491 8.67318 6.90791C8.92788 7.37528 9.22865 7.81881 9.56734 8.2319C9.60914 8.25707 9.6422 8.29399 9.66218 8.33782"
|
||||
stroke="#004B7C"
|
||||
strokeWidth={0.847356}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<rect
|
||||
x={17.6484}
|
||||
y={1.27539}
|
||||
width={18.7109}
|
||||
height={18.7109}
|
||||
rx={9.35544}
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.12624}
|
||||
/>
|
||||
<mask
|
||||
id="mask0_2511_140139"
|
||||
style={{
|
||||
maskType: 'alpha',
|
||||
}}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x={17}
|
||||
y={1}
|
||||
width={20}
|
||||
height={19}
|
||||
>
|
||||
<path
|
||||
d="M36.1844 10.5941C36.1844 5.47558 32.0349 1.32617 26.9164 1.32617C21.7978 1.32617 17.6484 5.47558 17.6484 10.5941C17.6484 15.7127 21.7978 19.8621 26.9164 19.8621C32.0349 19.8621 36.1844 15.7127 36.1844 10.5941Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_2511_140139)">
|
||||
<path
|
||||
d="M36.1844 10.5941C36.1844 5.47558 32.0349 1.32617 26.9164 1.32617C21.7978 1.32617 17.6484 5.47558 17.6484 10.5941C17.6484 15.7127 21.7978 19.8621 26.9164 19.8621C32.0349 19.8621 36.1844 15.7127 36.1844 10.5941Z"
|
||||
fill="#D8D8D8"
|
||||
/>
|
||||
<path
|
||||
d="M26.9242 19.864C32.0428 19.864 36.1922 15.7146 36.1922 10.5961C36.1922 5.47753 32.0428 1.32812 26.9242 1.32812C21.8057 1.32812 17.6562 5.47753 17.6562 10.5961C17.6562 15.7146 21.8057 19.864 26.9242 19.864Z"
|
||||
fill="#6DAE4F"
|
||||
/>
|
||||
<path
|
||||
d="M26.9279 1.3279C29.3859 1.3279 31.7432 2.30434 33.4813 4.04242C35.2194 5.7805 36.1959 8.13785 36.1959 10.5959C36.1959 13.0539 35.2194 15.4112 33.4813 17.1493C31.7432 18.8874 29.3859 19.8638 26.9279 19.8638C24.4699 19.8638 22.1125 18.8874 20.3745 17.1493C18.6364 15.4112 17.6599 13.0539 17.6599 10.5959C17.6599 8.13785 18.6364 5.7805 20.3745 4.04242C22.1125 2.30434 24.4699 1.3279 26.9279 1.3279ZM26.9279 0.00390625C24.1187 0.00390625 21.4246 1.11984 19.4382 3.10622C17.4519 5.09259 16.3359 7.7867 16.3359 10.5959C16.3359 13.405 17.4519 16.0991 19.4382 18.0855C21.4246 20.0719 24.1187 21.1878 26.9279 21.1878C29.7371 21.1878 32.4312 20.0719 34.4175 18.0855C36.4039 16.0991 37.5198 13.405 37.5198 10.5959C37.5198 7.7867 36.4039 5.09259 34.4175 3.10622C32.4312 1.11984 29.7371 0.00390625 26.9279 0.00390625V0.00390625Z"
|
||||
fill="#1B1F23"
|
||||
/>
|
||||
<path
|
||||
d="M32.3916 12.217C32.3675 11.1767 32.2073 10.144 31.915 9.14529C31.1136 8.50117 30.5044 7.64931 30.1541 6.68266C29.9422 5.98095 29.7966 5.72939 29.1743 5.71615C29.0477 5.72767 28.9246 5.76441 28.8123 5.82421C28.7001 5.88402 28.601 5.96568 28.5208 6.06438C28.4406 6.16308 28.381 6.27683 28.3454 6.39893C28.3098 6.52103 28.2991 6.64902 28.3137 6.77534C28.3217 7.0931 28.3481 7.41218 28.3931 7.72862C28.5745 8.59584 28.8301 9.44716 29.1611 10.2707L23.2031 5.74263C23.1037 5.64582 22.9851 5.57091 22.855 5.52273C22.7249 5.47455 22.5862 5.45417 22.4477 5.46291C22.3092 5.47164 22.1741 5.50929 22.0511 5.57343C21.9281 5.63757 21.8199 5.72678 21.7335 5.83531C21.6678 5.94514 21.6248 6.06707 21.6073 6.19384C21.5897 6.32061 21.5978 6.44962 21.6312 6.57317C21.6646 6.69673 21.7225 6.8123 21.8014 6.913C21.8804 7.0137 21.9789 7.09747 22.0909 7.1593L25.0699 9.41009L25.8511 10.1515L21.1244 6.5635C21.0297 6.46795 20.9155 6.39386 20.7897 6.34623C20.6638 6.29859 20.5292 6.27854 20.3949 6.28741C20.2607 6.29629 20.1299 6.33388 20.0114 6.39766C19.8929 6.46144 19.7895 6.54992 19.7081 6.65711C19.6268 6.7643 19.5694 6.88771 19.5398 7.01899C19.5103 7.15027 19.5093 7.28636 19.5368 7.41807C19.5644 7.54978 19.62 7.67403 19.6997 7.78242C19.7794 7.89082 19.8815 7.98083 19.999 8.04638L22.978 10.2972L24.7654 11.6212L20.8993 8.72162C20.8 8.62481 20.6814 8.5499 20.5513 8.50172C20.4212 8.45354 20.2824 8.43316 20.144 8.44189C20.0055 8.45063 19.8704 8.48828 19.7474 8.55242C19.6244 8.61656 19.5161 8.70577 19.4297 8.81429C19.0193 9.34389 19.3503 9.88673 19.7739 10.2177L22.7529 12.4553L24.249 13.5807L21.2701 11.3299C21.1783 11.23 21.0668 11.1502 20.9425 11.0956C20.8183 11.0411 20.6841 11.0129 20.5485 11.0129C20.4128 11.0129 20.2786 11.0411 20.1544 11.0956C20.0302 11.1502 19.9187 11.23 19.8269 11.3299C19.7456 11.4431 19.6891 11.5722 19.661 11.7088C19.633 11.8453 19.6339 11.9862 19.6639 12.1223C19.6939 12.2585 19.7522 12.3868 19.835 12.4989C19.9178 12.611 20.0233 12.7044 20.1447 12.773L25.573 16.745C26.3595 17.3368 28.3137 17.8479 29.1743 17.0998"
|
||||
stroke="#165209"
|
||||
strokeWidth={1.27103}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M33.034 13.1164L32.4779 12.6266C32.4056 11.6521 32.1776 10.6955 31.8026 9.79321C31.0275 8.88392 30.4786 7.80414 30.2006 6.6421C29.9888 5.94038 29.8431 5.68882 29.2209 5.67558C29.0942 5.6871 28.9711 5.72384 28.8589 5.78365C28.7467 5.84345 28.6475 5.92511 28.5673 6.02381C28.4871 6.12252 28.4275 6.23627 28.3919 6.35837C28.3564 6.48047 28.3456 6.60845 28.3603 6.73478C28.3682 7.05254 28.3947 7.37162 28.4397 7.68805C28.592 8.52349 28.8369 9.3404 29.1679 10.1242L28.9163 9.97856L23.2099 5.59614C23.1105 5.49934 22.992 5.42443 22.8619 5.37625C22.7318 5.32807 22.593 5.30769 22.4545 5.31642C22.3161 5.32515 22.181 5.3628 22.058 5.42695C21.9349 5.49109 21.8267 5.5803 21.7403 5.68882C21.6633 5.80203 21.6112 5.93032 21.5875 6.06518C21.5637 6.20004 21.569 6.3384 21.6028 6.4711C21.6366 6.60379 21.6982 6.72779 21.7835 6.83487C21.8688 6.94196 21.976 7.02969 22.0978 7.09226L25.0106 9.32981L25.8579 10.005L21.1312 6.41702C21.0328 6.31945 20.9149 6.24359 20.7853 6.19431C20.6557 6.14504 20.5173 6.12345 20.3788 6.13093C20.2404 6.13842 20.105 6.17481 19.9815 6.23776C19.858 6.30072 19.749 6.38884 19.6616 6.49646C19.5861 6.60948 19.535 6.73697 19.5115 6.87082C19.4879 7.00466 19.4925 7.14195 19.5249 7.27394C19.5572 7.40593 19.6167 7.52974 19.6995 7.6375C19.7823 7.74526 19.8867 7.83462 20.0059 7.89989L22.9848 10.1507L24.7722 11.4747L20.9062 8.58837C20.8087 8.48888 20.6912 8.4113 20.5613 8.36083C20.4315 8.31035 20.2925 8.28813 20.1534 8.29565C20.0143 8.30317 19.8784 8.34025 19.7548 8.40442C19.6312 8.4686 19.5227 8.55839 19.4365 8.66781C19.359 8.78019 19.3062 8.90772 19.2815 9.042C19.2569 9.17627 19.2609 9.31425 19.2935 9.44684C19.326 9.57943 19.3862 9.70363 19.4702 9.81126C19.5542 9.91888 19.6601 10.0075 19.7808 10.0712L22.7598 12.3088L24.2559 13.4342L21.2769 11.1966C21.1874 11.093 21.0766 11.0098 20.9521 10.9528C20.8276 10.8958 20.6923 10.8663 20.5553 10.8663C20.4184 10.8663 20.283 10.8958 20.1585 10.9528C20.034 11.0098 19.9232 11.093 19.8337 11.1966C19.7527 11.3088 19.6963 11.4369 19.6684 11.5724C19.6404 11.7079 19.6415 11.8479 19.6715 11.983C19.7015 12.1181 19.7598 12.2453 19.8425 12.3562C19.9253 12.4671 20.0306 12.5593 20.1515 12.6266L25.5799 16.7442C25.9693 17.0372 26.4142 17.2482 26.8876 17.3642C27.3609 17.4803 27.8529 17.4991 28.3338 17.4194C29.0461 17.8325 29.6684 17.8325 30.2006 17.4194C30.9977 16.7985 30.7355 16.7428 31.326 15.9233C31.9943 15.0516 32.5669 14.1106 33.034 13.1164Z"
|
||||
fill="#DCF0CB"
|
||||
/>
|
||||
<path
|
||||
d="M32.3916 12.217C32.3675 11.1767 32.2073 10.144 31.915 9.14529C31.1136 8.50117 30.5044 7.64931 30.1541 6.68266C29.9422 5.98095 29.7966 5.72939 29.1743 5.71615C29.0477 5.72767 28.9246 5.76441 28.8123 5.82421C28.7001 5.88402 28.601 5.96568 28.5208 6.06438C28.4406 6.16308 28.381 6.27683 28.3454 6.39893C28.3098 6.52103 28.2991 6.64902 28.3137 6.77534C28.3217 7.0931 28.3481 7.41219 28.3931 7.72862C28.5745 8.59584 28.8301 9.44716 29.1611 10.2707L23.2031 5.74263C23.1037 5.64582 22.9851 5.57091 22.855 5.52273C22.7249 5.47455 22.5862 5.45417 22.4477 5.46291C22.3092 5.47164 22.1741 5.50929 22.0511 5.57343C21.9281 5.63757 21.8199 5.72678 21.7335 5.83531C21.6678 5.94514 21.6248 6.06707 21.6073 6.19384C21.5897 6.32061 21.5978 6.44962 21.6312 6.57317C21.6646 6.69673 21.7225 6.8123 21.8014 6.913C21.8804 7.0137 21.9789 7.09747 22.0909 7.1593L25.0699 9.41009L25.8511 10.1515L21.1244 6.5635C21.0297 6.46795 20.9155 6.39386 20.7897 6.34623C20.6638 6.29859 20.5292 6.27854 20.3949 6.28741C20.2607 6.29629 20.1299 6.33388 20.0114 6.39766C19.8929 6.46145 19.7895 6.54992 19.7081 6.65711C19.6268 6.7643 19.5694 6.88771 19.5398 7.01899C19.5103 7.15027 19.5093 7.28636 19.5368 7.41807C19.5644 7.54978 19.62 7.67403 19.6997 7.78242C19.7794 7.89082 19.8815 7.98083 19.999 8.04638L22.978 10.2972L24.7654 11.6212L20.8993 8.72162C20.8 8.62481 20.6814 8.5499 20.5513 8.50172C20.4212 8.45354 20.2824 8.43316 20.144 8.44189C20.0055 8.45063 19.8704 8.48828 19.7474 8.55242C19.6244 8.61656 19.5161 8.70577 19.4297 8.81429C19.0193 9.34389 19.3503 9.88673 19.7739 10.2177L22.7529 12.4553L24.249 13.5807L21.2701 11.3299C21.1783 11.23 21.0668 11.1502 20.9425 11.0956C20.8183 11.0411 20.6841 11.0129 20.5485 11.0129C20.4128 11.0129 20.2786 11.0411 20.1544 11.0956C20.0302 11.1502 19.9187 11.23 19.8269 11.3299C19.7456 11.4431 19.6891 11.5722 19.661 11.7088C19.633 11.8453 19.6339 11.9862 19.6639 12.1223C19.6939 12.2585 19.7522 12.3868 19.835 12.4989C19.9178 12.611 20.0233 12.7044 20.1447 12.773L25.573 16.745C26.3595 17.3368 28.2025 17.7274 29.1743 17.5659"
|
||||
stroke="#165209"
|
||||
strokeWidth={0.423678}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M35.8765 15.0818C35.6087 14.7952 35.4015 14.4574 35.2675 14.0888C35.2675 13.7975 35.188 13.5195 35.1351 13.2282C35.0937 12.7201 34.9302 12.2296 34.6584 11.7983C33.891 10.8839 33.343 9.806 33.0564 8.64718C32.8446 7.94546 32.6989 7.6939 32.0766 7.68066C31.95 7.69218 31.8269 7.72892 31.7147 7.78873C31.6024 7.84853 31.5033 7.93019 31.4231 8.02889C31.3429 8.12759 31.2833 8.24134 31.2477 8.36345C31.2122 8.48555 31.2014 8.61353 31.216 8.73986C31.2253 9.05762 31.2518 9.37537 31.2955 9.69313C31.5338 10.9112 31.7854 11.9174 31.8118 11.9836L26.1319 7.73362C26.0335 7.63488 25.9152 7.55825 25.7849 7.50887C25.6546 7.45949 25.5152 7.43848 25.3761 7.44726C25.237 7.45603 25.1014 7.49438 24.9783 7.55974C24.8552 7.62511 24.7474 7.71598 24.6623 7.8263C24.596 7.93533 24.5524 8.05654 24.5338 8.18276C24.5153 8.30898 24.5223 8.43763 24.5544 8.56109C24.5865 8.68456 24.6431 8.80032 24.7207 8.90153C24.7984 9.00274 24.8956 9.08733 25.0065 9.15029L27.9855 11.4011L28.8858 12.1425L24.1194 8.5545C24.022 8.455 23.9044 8.37743 23.7746 8.32695C23.6448 8.27648 23.5057 8.25426 23.3666 8.26178C23.2276 8.26929 23.0917 8.30638 22.9681 8.37055C22.8445 8.43472 22.736 8.52452 22.6498 8.63394C22.5723 8.74632 22.5194 8.87385 22.4948 9.00812C22.4701 9.1424 22.4742 9.28038 22.5067 9.41297C22.5392 9.54556 22.5995 9.66976 22.6835 9.77738C22.7675 9.88501 22.8733 9.97361 22.994 10.0374L25.973 12.2882L27.7604 13.6122L23.8811 10.7126C23.782 10.6168 23.6638 10.5431 23.5343 10.4961C23.4047 10.4491 23.2667 10.43 23.1292 10.44C22.9918 10.45 22.858 10.4889 22.7366 10.5541C22.6152 10.6193 22.5089 10.7094 22.4247 10.8185C22.0143 11.3481 22.332 11.891 22.769 12.222L25.7479 14.4463L27.2308 15.5717L24.1989 13.3209C24.013 13.1594 23.7724 13.0749 23.5264 13.0848C23.2803 13.0946 23.0473 13.198 22.8749 13.3738C22.7938 13.4823 22.7361 13.6064 22.7055 13.7384C22.6748 13.8703 22.6718 14.0071 22.6967 14.1402C22.7216 14.2733 22.7738 14.3999 22.85 14.5118C22.9263 14.6237 23.0249 14.7186 23.1397 14.7905L28.4356 18.7625C28.8779 19.0935 29.3889 19.3199 29.9318 19.4245L30.6997 19.5436C31.1035 19.6032 31.4941 19.733 31.8516 19.9276C32.0987 20.0483 32.3822 20.0719 32.646 19.9938C33.5771 19.6654 34.3917 19.0717 34.9894 18.2859C35.5492 17.5121 35.8713 16.5919 35.9162 15.6379C35.9498 15.4521 35.9362 15.2609 35.8765 15.0818Z"
|
||||
stroke="#165209"
|
||||
strokeWidth={1.27103}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M35.9319 15.0166L35.3361 14.5664C35.2702 13.591 35.042 12.6334 34.6609 11.7331C33.8911 10.8202 33.3429 9.74178 33.0589 8.58197C32.847 7.88025 32.7014 7.62869 32.0791 7.61545C31.9525 7.62697 31.8294 7.66371 31.7172 7.72351C31.6049 7.78332 31.5058 7.86498 31.4256 7.96368C31.3454 8.06238 31.2858 8.17613 31.2502 8.29823C31.2146 8.42033 31.2039 8.54832 31.2185 8.67464C31.2278 8.9924 31.2543 9.31016 31.298 9.62792C31.5363 10.8592 31.7878 11.8655 31.8143 11.9184L26.1344 7.66841C26.035 7.5716 25.9164 7.49669 25.7863 7.44851C25.6562 7.40034 25.5175 7.37996 25.379 7.38869C25.2405 7.39742 25.1054 7.43507 24.9824 7.49921C24.8594 7.56335 24.7512 7.65256 24.6648 7.76109C24.2543 8.30393 24.5853 8.83352 25.009 9.16452L27.988 11.4021L28.8883 12.1435L24.1219 8.48929C24.0225 8.39248 23.904 8.31757 23.7739 8.26939C23.6438 8.22121 23.505 8.20083 23.3665 8.20956C23.2281 8.2183 23.093 8.25595 22.97 8.32009C22.8469 8.38423 22.7387 8.47344 22.6523 8.58197C22.2418 9.11156 22.5728 9.6544 22.9965 9.9854L25.9755 12.2229L27.7629 13.5469L23.8836 10.6474C23.7854 10.5509 23.6679 10.4762 23.5389 10.4281C23.4098 10.3801 23.2721 10.3597 23.1347 10.3685C22.9973 10.3772 22.8633 10.4148 22.7413 10.4789C22.6194 10.5429 22.5124 10.6319 22.4272 10.7401C22.3475 10.8518 22.2929 10.9793 22.2671 11.1141C22.2412 11.2488 22.2448 11.3875 22.2774 11.5207C22.3101 11.654 22.3712 11.7786 22.4564 11.8861C22.5417 11.9936 22.6491 12.0814 22.7714 12.1435L25.7504 14.3811L27.2333 15.5065L24.2014 13.2689C24.0184 13.1011 23.7765 13.0125 23.5284 13.0224C23.2804 13.0324 23.0463 13.14 22.8774 13.3219C22.7849 13.4307 22.7177 13.5586 22.6805 13.6965C22.6434 13.8343 22.6372 13.9787 22.6626 14.1192C22.6879 14.2598 22.744 14.3929 22.827 14.5092C22.9099 14.6254 23.0175 14.7218 23.1422 14.7915L28.4381 18.7635C29.2411 19.2423 30.1518 19.511 31.0861 19.5446C31.4251 19.7518 31.7792 19.9333 32.1453 20.0875C33.2076 19.8872 34.1541 19.2909 34.7933 18.4192C35.4911 17.4176 35.8864 16.2365 35.9319 15.0166Z"
|
||||
fill="#DDF6D1"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M35.8765 15.0818C35.6087 14.7952 35.4015 14.4574 35.2675 14.0888C35.2675 13.7975 35.188 13.5195 35.1351 13.2282C35.0937 12.7201 34.9302 12.2296 34.6584 11.7983C33.891 10.8839 33.343 9.806 33.0564 8.64718C32.8446 7.94546 32.6989 7.6939 32.0766 7.68066C31.95 7.69218 31.8269 7.72892 31.7147 7.78873C31.6024 7.84853 31.5033 7.93019 31.4231 8.02889C31.3429 8.12759 31.2833 8.24134 31.2477 8.36345C31.2122 8.48555 31.2014 8.61353 31.216 8.73986C31.2253 9.05762 31.2518 9.37537 31.2955 9.69313C31.5338 10.9112 31.7854 11.9174 31.8118 11.9836L26.1319 7.73362C26.0335 7.63488 25.9152 7.55825 25.7849 7.50887C25.6546 7.45949 25.5152 7.43848 25.3761 7.44726C25.237 7.45603 25.1014 7.49438 24.9783 7.55974C24.8552 7.62511 24.7474 7.71598 24.6623 7.8263C24.596 7.93533 24.5524 8.05654 24.5338 8.18276C24.5153 8.30898 24.5223 8.43763 24.5544 8.56109C24.5865 8.68456 24.6431 8.80032 24.7207 8.90153C24.7984 9.00274 24.8956 9.08733 25.0065 9.15029L27.9855 11.4011L28.8858 12.1425L24.1194 8.5545C24.022 8.455 23.9044 8.37743 23.7746 8.32695C23.6448 8.27648 23.5057 8.25426 23.3666 8.26178C23.2276 8.26929 23.0917 8.30638 22.9681 8.37055C22.8445 8.43472 22.736 8.52452 22.6498 8.63394C22.5723 8.74632 22.5194 8.87385 22.4948 9.00812C22.4701 9.1424 22.4742 9.28038 22.5067 9.41297C22.5392 9.54556 22.5995 9.66976 22.6835 9.77738C22.7675 9.88501 22.8733 9.97361 22.994 10.0374L25.973 12.2882L27.7604 13.6122L23.8811 10.7126C23.782 10.6168 23.6638 10.5431 23.5343 10.4961C23.4047 10.4491 23.2667 10.43 23.1292 10.44C22.9918 10.45 22.858 10.4889 22.7366 10.5541C22.6152 10.6193 22.5089 10.7094 22.4247 10.8185C22.0143 11.3481 22.332 11.891 22.769 12.222L25.7479 14.4463L27.2308 15.5717L24.1989 13.3209C24.013 13.1594 23.7724 13.0749 23.5264 13.0848C23.2803 13.0946 23.0473 13.198 22.8749 13.3738C22.7938 13.4823 22.7361 13.6064 22.7055 13.7384C22.6748 13.8703 22.6718 14.0071 22.6967 14.1402C22.7216 14.2733 22.7738 14.3999 22.85 14.5118C22.9263 14.6237 23.0249 14.7186 23.1397 14.7905L28.4356 18.7625C28.8779 19.0935 29.3889 19.3199 29.9318 19.4245L30.6997 19.5436C31.1035 19.6032 31.4941 19.733 31.8516 19.9276C32.0987 20.0483 32.3822 20.0719 32.646 19.9938C33.5771 19.6654 34.3917 19.0717 34.9894 18.2859C35.5492 17.5121 35.8713 16.5919 35.9162 15.6379C35.9498 15.4521 35.9362 15.2609 35.8765 15.0818Z"
|
||||
stroke="#165209"
|
||||
strokeWidth={0.423678}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M26.3078 2.16684L25.4485 4.23227M28.0171 3.73578L27.0506 4.95385L28.0171 3.73578ZM23.6016 2.15625L23.6876 3.73578L23.6016 2.15625Z"
|
||||
stroke="#165209"
|
||||
strokeWidth={0.847356}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
x={34.2305}
|
||||
y={1.27539}
|
||||
width={18.7109}
|
||||
height={18.7109}
|
||||
rx={9.35544}
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.12624}
|
||||
/>
|
||||
<path
|
||||
d="M43.6358 19.8621C48.8734 19.8621 53.1193 15.7127 53.1193 10.5941C53.1193 5.47558 48.8734 1.32617 43.6358 1.32617C38.3982 1.32617 34.1523 5.47558 34.1523 10.5941C34.1523 15.7127 38.3982 19.8621 43.6358 19.8621Z"
|
||||
fill="#DF704D"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M43.2395 6.62305C42.9098 6.29999 42.5181 6.04368 42.0869 5.8688C41.6556 5.69391 41.1933 5.60389 40.7264 5.60389C40.2595 5.60389 39.7972 5.69391 39.3659 5.8688C38.9347 6.04368 38.543 6.29999 38.2133 6.62305C37.8794 6.94891 37.6146 7.33589 37.4339 7.76186C37.2532 8.18782 37.1602 8.64442 37.1602 9.10554C37.1602 9.56666 37.2532 10.0233 37.4339 10.4492C37.6146 10.8752 37.8794 11.2622 38.2133 11.588L43.6324 16.884L49.0516 11.588C49.3854 11.2622 49.6503 10.8752 49.831 10.4492C50.0117 10.0233 50.1047 9.56666 50.1047 9.10554C50.1047 8.64442 50.0117 8.18782 49.831 7.76186C49.6503 7.33589 49.3854 6.94891 49.0516 6.62305C48.724 6.29895 48.3337 6.04188 47.9034 5.86684C47.473 5.6918 47.0113 5.6023 46.5452 5.60358C46.0789 5.60081 45.6167 5.68963 45.1862 5.86476C44.7556 6.03988 44.3655 6.29775 44.0389 6.62305L43.6324 7.02025L43.2395 6.62305Z"
|
||||
fill="#FFF3F0"
|
||||
stroke="#77280C"
|
||||
strokeWidth={0.847356}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M43.2451 6.62256C42.9173 6.2963 42.5262 6.03715 42.0947 5.86025C41.6632 5.68335 41.1999 5.59224 40.732 5.59224C40.2641 5.59224 39.8008 5.68335 39.3693 5.86025C38.9379 6.03715 38.5467 6.2963 38.2189 6.62256C37.5651 7.27782 37.1992 8.15677 37.1992 9.07195C37.1992 9.98713 37.5651 10.8661 38.2189 11.5213L43.638 16.8173L49.0572 11.5213C49.7109 10.8661 50.0768 9.98713 50.0768 9.07195C50.0768 8.15677 49.7109 7.27782 49.0572 6.62256C48.7303 6.29666 48.3404 6.03753 47.9101 5.86024C47.4798 5.68295 47.0178 5.59103 46.5508 5.58984C46.0836 5.58955 45.6211 5.68079 45.1906 5.85817C44.7601 6.03555 44.3704 6.29547 44.0444 6.62256L43.638 6.95356L43.2451 6.62256Z"
|
||||
stroke="#77280C"
|
||||
strokeWidth={0.847356}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<rect
|
||||
x={50.8164}
|
||||
y={1.27539}
|
||||
width={18.7109}
|
||||
height={18.7109}
|
||||
rx={9.35544}
|
||||
stroke="currentColor"
|
||||
strokeWidth={2.12624}
|
||||
/>
|
||||
<path
|
||||
d="M60.1436 19.8621C65.3812 19.8621 69.6271 15.7127 69.6271 10.5941C69.6271 5.47558 65.3812 1.32617 60.1436 1.32617C54.9061 1.32617 50.6602 5.47558 50.6602 10.5941C50.6602 15.7127 54.9061 19.8621 60.1436 19.8621Z"
|
||||
fill="#F5BB5C"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M61.2469 17.7454H59.0792C58.8852 17.7454 58.6991 17.6701 58.5619 17.536C58.4247 17.4019 58.3477 17.2201 58.3477 17.0304V15.2695H61.9785V17.0304C61.9785 17.2201 61.9014 17.4019 61.7642 17.536C61.627 17.6701 61.4409 17.7454 61.2469 17.7454Z"
|
||||
fill="#FFE1B2"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M58.3634 15.6129V15.2687C58.3634 14.8186 58.2889 14.3724 58.1466 13.9447C57.9568 13.57 57.7152 13.2225 57.4286 12.912C56.9295 12.5112 56.5265 12.0082 56.2479 11.4386C55.9694 10.869 55.8221 10.2466 55.8164 9.61526C55.8164 8.48808 56.2746 7.40707 57.0902 6.61004C57.9057 5.813 59.0119 5.36523 60.1653 5.36523C61.3187 5.36523 62.4248 5.813 63.2404 6.61004C64.0559 7.40707 64.5141 8.48808 64.5141 9.61526C64.5025 10.2604 64.3475 10.8953 64.0597 11.476C63.772 12.0567 63.3584 12.5693 62.8477 12.9782C62.9426 12.912 62.7394 13.0576 62.6039 13.243C62.4705 13.435 62.3656 13.6445 62.2923 13.8653C62.1543 14.2935 62.0857 14.7403 62.0891 15.1893V15.5335"
|
||||
fill="#FCF0DE"
|
||||
/>
|
||||
<path
|
||||
d="M59.4061 6.33203C58.7742 6.43607 58.1941 6.73813 57.7533 7.19263C57.2911 7.63134 56.9708 8.19297 56.832 8.8079"
|
||||
stroke="#1B1F23"
|
||||
strokeWidth={1.69471}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M61.2469 17.7454H59.0792C58.8852 17.7454 58.6991 17.6701 58.5619 17.536C58.4247 17.4019 58.3477 17.2201 58.3477 17.0304V15.2695H61.9785V17.0304C61.9785 17.2201 61.9014 17.4019 61.7642 17.536C61.627 17.6701 61.4409 17.7454 61.2469 17.7454V17.7454Z"
|
||||
stroke="#5D3B01"
|
||||
strokeWidth={0.847356}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M60.1336 1.98828V3.65651M58.3453 15.6122V15.2679C58.3489 14.8189 58.2803 14.3722 58.1421 13.9439C58.0538 13.722 57.9353 13.5127 57.7898 13.3217C57.645 13.1142 57.4769 12.9232 57.2886 12.7524C57.1078 12.5934 56.9402 12.4207 56.7873 12.236C56.16 11.4894 55.8155 10.5541 55.8118 9.58801C55.8118 8.46083 56.27 7.37982 57.0856 6.58279C57.9012 5.78576 59.0073 5.33799 60.1607 5.33799C61.3141 5.33799 62.4202 5.78576 63.2358 6.58279C64.0514 7.37982 64.5096 8.46083 64.5096 9.58801C64.4935 10.5542 64.1451 11.4869 63.5206 12.236C63.2903 12.514 63.0329 12.7656 62.7483 12.9907C62.6513 13.0768 62.5607 13.1697 62.4774 13.2687C62.3481 13.4612 62.2478 13.6707 62.1793 13.891C62.0413 14.3193 61.9728 14.766 61.9761 15.215V15.5592L58.3453 15.6122ZM55.5273 3.49234L56.3538 4.53962L55.5273 3.49234ZM64.7602 3.48704L63.9406 4.53962L64.7602 3.48704Z"
|
||||
stroke="#5D3B01"
|
||||
strokeWidth={0.847356}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
const LinkedinIconSmall = () => {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="16" height="16" rx="2.77787" fill="#E9A53F" />
|
||||
<g clipPath="url(#clip0_2511_140522)">
|
||||
<path
|
||||
d="M3.33203 4.5751C3.33203 4.27479 3.43714 4.02704 3.64735 3.83186C3.85755 3.63666 4.13083 3.53906 4.46717 3.53906C4.7975 3.53906 5.06476 3.63515 5.26897 3.82735C5.47918 4.02555 5.58428 4.2838 5.58428 4.60213C5.58428 4.89041 5.48218 5.13065 5.27798 5.32285C5.06777 5.52104 4.79149 5.62014 4.44915 5.62014H4.44014C4.10981 5.62014 3.84254 5.52104 3.63834 5.32285C3.43413 5.12465 3.33203 4.8754 3.33203 4.5751ZM3.44915 12.458L3.44915 6.43996H5.44915L5.44915 12.458H3.44915ZM6.55726 12.458H8.55726V9.09762C8.55726 8.8874 8.58128 8.72524 8.62933 8.61113C8.71341 8.40693 8.84104 8.23425 9.01221 8.09312C9.18338 7.95197 9.39809 7.8814 9.65635 7.8814C10.329 7.8814 10.6654 8.33485 10.6654 9.24176V12.458H12.6654L12.6654 9.00753C12.6654 8.11864 12.4552 7.44447 12.0347 6.98501C11.6143 6.52555 11.0588 6.29582 10.3681 6.29582C9.59329 6.29582 8.98969 6.62915 8.55726 7.29582V7.31384H8.54825L8.55726 7.29582V6.43996H6.55726C6.56926 6.63215 6.57527 7.22975 6.57527 8.23276C6.57527 9.23575 6.56926 10.6442 6.55726 12.458Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2511_140522">
|
||||
<rect
|
||||
x="3.33203"
|
||||
y="3.33203"
|
||||
width="9.33333"
|
||||
height="9.33333"
|
||||
fill="white"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export const LinkedinPreview: FC<{
|
||||
maximumCharacters?: number;
|
||||
}> = (props) => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const current = useLaunchStore((state) => state.current);
|
||||
const mediaDir = useMediaDirectory();
|
||||
|
||||
const renderContent = topValue.map((p) => {
|
||||
const newContent = stripHtmlValidation(
|
||||
'normal',
|
||||
p.content.replace(
|
||||
/<span.*?data-mention-id="([.\s\S]*?)"[.\s\S]*?>([.\s\S]*?)<\/span>/gi,
|
||||
(match, match1, match2) => {
|
||||
return `[[[${match2}]]]`;
|
||||
}
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const { start, end } = textSlicer(
|
||||
integration?.identifier || '',
|
||||
props.maximumCharacters || 10000,
|
||||
newContent
|
||||
);
|
||||
|
||||
const finalValue =
|
||||
newContent
|
||||
.slice(start, end)
|
||||
.replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
|
||||
newContent.slice(end).replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`</mark>`;
|
||||
|
||||
return { text: finalValue, images: p.image };
|
||||
});
|
||||
return (
|
||||
<div className="py-[15px] flex flex-col px-[15px] w-full gap-[20px] bg-bgLinkedin rounded-[12px]">
|
||||
<div className="flex gap-[8px]">
|
||||
<div className="w-[48px] h-[48px]">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] w-[48px] h-[48px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col leading-[16px]">
|
||||
<div className="text-[14px] font-[500]">{integration?.name}</div>
|
||||
<div className="text-[12px] font-[400] text-[#A3A3A3]">
|
||||
2,871 followers
|
||||
</div>
|
||||
<div className="text-[12px] font-[400] text-[#A3A3A3] flex gap-[4px] items-center">
|
||||
<span>30m •</span>
|
||||
<span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M5 10C4.30833 10 3.65833 9.86867 3.05 9.606C2.44167 9.34367 1.9125 8.9875 1.4625 8.5375C1.0125 8.0875 0.656333 7.55833 0.394 6.95C0.131333 6.34167 0 5.69167 0 5C0 4.30833 0.131333 3.65833 0.394 3.05C0.656333 2.44167 1.0125 1.9125 1.4625 1.4625C1.9125 1.0125 2.44167 0.656167 3.05 0.3935C3.65833 0.131167 4.30833 0 5 0C5.69167 0 6.34167 0.131167 6.95 0.3935C7.55833 0.656167 8.0875 1.0125 8.5375 1.4625C8.9875 1.9125 9.34367 2.44167 9.606 3.05C9.86867 3.65833 10 4.30833 10 5C10 5.69167 9.86867 6.34167 9.606 6.95C9.34367 7.55833 8.9875 8.0875 8.5375 8.5375C8.0875 8.9875 7.55833 9.34367 6.95 9.606C6.34167 9.86867 5.69167 10 5 10ZM4.5 8.975V8C4.225 8 3.98967 7.90217 3.794 7.7065C3.598 7.5105 3.5 7.275 3.5 7V6.5L1.1 4.1C1.075 4.25 1.052 4.4 1.031 4.55C1.01033 4.7 1 4.85 1 5C1 6.00833 1.33133 6.89167 1.994 7.65C2.65633 8.40833 3.49167 8.85 4.5 8.975ZM7.95 7.7C8.11667 7.51667 8.26667 7.31867 8.4 7.106C8.53333 6.89367 8.64383 6.67283 8.7315 6.4435C8.81883 6.2145 8.8855 5.97917 8.9315 5.7375C8.97717 5.49583 9 5.25 9 5C9 4.18333 8.773 3.4375 8.319 2.7625C7.86467 2.0875 7.25833 1.6 6.5 1.3V1.5C6.5 1.775 6.40217 2.01033 6.2065 2.206C6.0105 2.402 5.775 2.5 5.5 2.5H4.5V3.5C4.5 3.64167 4.45217 3.76033 4.3565 3.856C4.2605 3.952 4.14167 4 4 4H3V5H6C6.14167 5 6.2605 5.04783 6.3565 5.1435C6.45217 5.2395 6.5 5.35833 6.5 5.5V7H7C7.21667 7 7.4125 7.0645 7.5875 7.1935C7.7625 7.32283 7.88333 7.49167 7.95 7.7Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-[14px] font-[400] whitespace-pre-line"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: renderContent?.[0]?.text,
|
||||
}}
|
||||
/>
|
||||
{!!renderContent?.[0]?.images?.length && (
|
||||
<div className="h-[280px] -mx-[15px] overflow-hidden flex">
|
||||
{renderContent?.[0]?.images.map((image, index) => (
|
||||
<a
|
||||
key={`image_${index}`}
|
||||
className="flex-1"
|
||||
href={mediaDir.set(image.path)}
|
||||
target="_blank"
|
||||
>
|
||||
<VideoOrImage autoplay={true} src={mediaDir.set(image.path)} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex text-textLinkedin text-[12px] font-[400] items-center">
|
||||
<div className="flex flex-1 gap-[11px] items-center">
|
||||
<Icons />
|
||||
<div className="">88</div>
|
||||
</div>
|
||||
<div className="gap-[9px] items-center flex">
|
||||
<div>4 Comments</div>
|
||||
<div>
|
||||
<div className="w-[3px] h-[3px] bg-[#565C65] rounded-full" />
|
||||
</div>
|
||||
<div>8 Reposts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-[8px] flex text-[14px] font-[700] px-[32px] justify-between border-t border-borderLinkedin text-textLinkedin">
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6.39692 20.41C5.39692 20.41 4.35692 20.02 3.75692 19.41C3.37692 19.03 3.13692 18.5 3.00692 17.79C2.67692 17.57 2.39692 17.28 2.17692 16.95C1.89692 16.53 1.71692 15.99 1.65692 15.29C0.916917 14.74 0.476917 14.06 0.366917 13.24C0.276917 12.56 0.406917 11.86 0.746917 11.15C0.336917 10.66 0.0969174 10.05 0.0169174 9.35C-0.163083 7.53 1.10692 6.16 3.17692 5.95C3.53692 5.91 3.89692 5.89 4.25692 5.89C4.65692 5.89 5.05692 5.91 5.45692 5.96C5.26692 5.39 5.14692 4.86 5.10692 4.4C4.97692 3.09 5.31692 1.98 6.11692 1.11C6.71692 0.45 7.63692 0 8.41692 0C8.54692 0 8.67692 0.01 8.78692 0.04C9.61692 0.22 10.2069 0.78 10.6269 1.79C10.8369 2.29 10.9269 2.69 11.0669 3.46C11.1669 4.05 11.2269 4.29 11.3169 4.57C11.6069 5.44 12.3869 6.36 13.3469 6.98C14.1069 7.47 14.9369 7.86 15.7969 8.14H17.9169C18.3569 8.14 18.7269 8.29 19.0069 8.56C19.3169 8.86 19.4669 9.28 19.4269 9.75V17.05C19.4269 17.53 19.2269 17.93 18.8769 18.18C18.6169 18.36 18.3069 18.45 17.9569 18.45H14.9069C12.2269 19.08 10.4069 19.54 9.54692 19.82C8.22692 20.24 7.62692 20.36 6.64692 20.43C6.56692 20.43 6.47692 20.43 6.39692 20.43V20.41ZM4.27692 7.68C3.97692 7.68 3.67692 7.69 3.36692 7.72C2.27692 7.83 1.72692 8.34 1.80692 9.16C1.85692 9.65 2.03692 9.99 2.39692 10.23C2.58692 10.37 2.71692 10.57 2.76692 10.8C2.80692 11.03 2.76692 11.27 2.63692 11.46C2.25692 12.03 2.09692 12.54 2.15692 12.99C2.20692 13.38 2.46692 13.7 2.97692 13.99C3.10692 14.07 3.21692 14.18 3.29692 14.31C3.37692 14.44 3.41692 14.59 3.42692 14.74C3.44692 15.49 3.58692 15.8 3.67692 15.92C3.82692 16.14 3.99692 16.29 4.21692 16.38C4.36692 16.44 4.48692 16.55 4.58692 16.68C4.67692 16.81 4.73692 16.97 4.75692 17.12C4.81692 17.79 4.97692 18.04 5.05692 18.12C5.31692 18.39 5.90692 18.59 6.41692 18.59H6.54692C7.37692 18.53 7.81692 18.44 9.02692 18.05C9.96692 17.75 11.8069 17.29 14.6469 16.62V9.55C13.7869 9.23 13.0469 8.86 12.3969 8.44C11.0969 7.6 10.0669 6.35 9.64692 5.09C9.50692 4.69 9.44692 4.38 9.32692 3.72C9.20692 3.01 9.13692 2.75 9.00692 2.43C8.76692 1.85 8.60692 1.78 8.43692 1.74C8.24692 1.74 7.78692 1.92 7.46692 2.26C7.00692 2.77 6.83692 3.36 6.91692 4.18C6.97692 4.84 7.25692 5.69 7.73692 6.72C7.80692 6.87 7.83692 7.05 7.81692 7.22C7.79692 7.39 7.72692 7.55 7.61692 7.68C7.50692 7.81 7.36692 7.91 7.19692 7.96C7.10692 7.99 7.01692 8 6.91692 8C6.83692 8 6.76692 8 6.68692 7.97C5.89692 7.76 5.08692 7.65 4.27692 7.65V7.68ZM17.6469 16.63V9.9H16.4169V16.63H17.6469Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div>Like</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="19"
|
||||
viewBox="0 0 21 19"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7 1H14C17.3137 1 20 3.68629 20 7C20 8.96497 19.0567 10.7096 17.5938 11.8057L17.5762 11.8184L17.5596 11.832L11.5 16.7891V13H7C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
<div>Comments</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="25"
|
||||
viewBox="0 0 18 25"
|
||||
fill="none"
|
||||
>
|
||||
<g clip-path="url(#clip0_2511_140348)">
|
||||
<path
|
||||
d="M14.69 4.17L10.2 0H7.56L11.08 3.27H3.61C1.62 3.27 0 4.89 0 6.88V15.94H1.8V6.88C1.8 5.88 2.61 5.07 3.61 5.07H11.08L7.58 8.32H10.22L14.69 4.17Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M3.14062 20.1098L7.63062 24.2798H10.2706L6.75062 21.0098H14.2206C16.2106 21.0098 17.8306 19.3898 17.8306 17.3998V8.33984H16.0306V17.3998C16.0306 18.3998 15.2206 19.2098 14.2206 19.2098H6.75062L10.2506 15.9598H7.61063L3.14062 20.1098Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2511_140348">
|
||||
<rect width="17.83" height="24.28" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<div>Repost</div>
|
||||
</div>
|
||||
<div className="flex gap-[4px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="21"
|
||||
viewBox="0 0 21 21"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M21 0L0 7.2L7.2 10.8L16.2 4.8L9.6 13.8L13.8 21L21 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div>Send</div>
|
||||
</div>
|
||||
</div>
|
||||
{renderContent.length > 1 && (
|
||||
<>
|
||||
{renderContent.slice(1).map((value, index) => (
|
||||
<div key={index} className="flex flex-col gap-[12px]">
|
||||
<div className="flex gap-[6px] leading-[17px]">
|
||||
<div className="h-[34px]">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] h-[34px] w-[34px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[12px]">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-[6px]">
|
||||
<div className="text-[13px] font-[500]">
|
||||
{integration?.name}
|
||||
</div>
|
||||
<div>
|
||||
<LinkedinIconSmall />
|
||||
</div>
|
||||
<div className="text-[12px] font-[400]">• 1st</div>
|
||||
</div>
|
||||
<div className="text-[12px] font-[400] text-textLinkedin">
|
||||
Founder
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="whitespace-pre-line text-[14px] font-[400]"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: value.text,
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-[6px] font-[400] text-[12px] text-textLinkedin items-center">
|
||||
<div className="font-[700]">Like</div>
|
||||
<div>•</div>
|
||||
<div>
|
||||
<svg
|
||||
width="21"
|
||||
height="22"
|
||||
viewBox="0 0 21 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="1.0625"
|
||||
y="1.27734"
|
||||
width="18.7109"
|
||||
height="18.7109"
|
||||
rx="9.35544"
|
||||
stroke="white"
|
||||
strokeWidth="2.12624"
|
||||
/>
|
||||
<path
|
||||
d="M10.4444 19.7547C15.682 19.7547 19.9279 15.6053 19.9279 10.4867C19.9279 5.36816 15.682 1.21875 10.4444 1.21875C5.20684 1.21875 0.960938 5.36816 0.960938 10.4867C0.960938 15.6053 5.20684 19.7547 10.4444 19.7547Z"
|
||||
fill="#1485BD"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M15.7769 9.49337H15.0318C14.964 9.49337 14.8286 9.24182 14.4899 8.88434C13.9886 8.35474 13.4331 7.6795 13.0402 7.30878C12.0654 6.48197 11.2686 5.4738 10.6965 4.34304C10.3713 3.6678 10.3442 3.36328 9.68038 3.36328C9.41819 3.39637 9.17864 3.5255 9.01014 3.72458C8.84164 3.92366 8.75676 4.17783 8.77267 4.43572C8.77267 4.62108 8.86751 5.26983 8.90815 5.49491C9.19833 6.53009 9.65567 7.51338 10.2629 8.4077H10.9945H5.19604C5.03181 8.40533 4.86888 8.43654 4.71771 8.49931C4.56654 8.56209 4.43047 8.65505 4.31821 8.77223C4.20596 8.88941 4.12001 9.02823 4.06587 9.17978C4.01173 9.33132 3.9906 9.49226 4.00383 9.65225C4.02471 9.96246 4.16748 10.2528 4.40229 10.4625C4.63709 10.6722 4.94577 10.7852 5.26378 10.7776H5.48055C5.34176 10.7811 5.20503 10.8112 5.07816 10.8663C4.95129 10.9214 4.83678 11.0004 4.74116 11.0988C4.64554 11.1971 4.57069 11.3129 4.52089 11.4396C4.47108 11.5662 4.44731 11.7012 4.45091 11.8368C4.45326 12.1036 4.55728 12.36 4.74266 12.5558C4.92804 12.7517 5.18147 12.873 5.45345 12.896C5.28789 13.0198 5.16238 13.1876 5.09194 13.3794C5.0215 13.5711 5.00913 13.7786 5.05632 13.977C5.10351 14.1755 5.20824 14.3564 5.35797 14.4981C5.50771 14.6398 5.69609 14.7364 5.90053 14.7761C5.77072 14.9963 5.72737 15.2552 5.7786 15.5043C5.84797 15.7489 5.99897 15.9638 6.2076 16.1149C6.41624 16.266 6.67055 16.3447 6.93017 16.3384H10.0326C10.4391 16.3384 10.8441 16.2881 11.2384 16.1928L13.1622 15.6367H15.7363C17.1181 15.5837 17.4839 9.49337 15.7769 9.49337Z"
|
||||
fill="#E6F7FF"
|
||||
/>
|
||||
<path
|
||||
d="M9.66218 8.40793H5.16429C4.99306 8.40636 4.82349 8.44086 4.66712 8.50909C4.51076 8.57731 4.37127 8.67765 4.25814 8.80328C4.14501 8.92891 4.06091 9.07689 4.01154 9.23713C3.96218 9.39738 3.94872 9.56613 3.97208 9.73192C3.99629 10.0398 4.14049 10.3268 4.37495 10.5337C4.6094 10.7407 4.9162 10.8518 5.23203 10.8441H5.4488C5.31001 10.8475 5.17328 10.8776 5.04641 10.9327C4.91954 10.9878 4.80503 11.0668 4.70941 11.1652C4.61379 11.2635 4.53894 11.3794 4.48914 11.506C4.43933 11.6326 4.41556 11.7676 4.41916 11.9033C4.42415 12.1706 4.52871 12.427 4.71326 12.6245C4.89781 12.8219 5.14969 12.9468 5.4217 12.9757C5.29214 13.075 5.18712 13.2016 5.11442 13.346C5.04172 13.4904 5.0032 13.6489 5.00172 13.8098C5.0024 14.0582 5.09018 14.2988 5.25043 14.4915C5.41069 14.6843 5.63372 14.8175 5.88233 14.869C5.75158 15.0937 5.70828 15.357 5.7604 15.6105C5.83228 15.8526 5.98435 16.0645 6.19275 16.2131C6.40116 16.3616 6.65411 16.4384 6.91196 16.4313H10.0144C10.4209 16.4313 10.8259 16.381 11.2202 16.2857L13.144 15.6634H15.7181C17.0728 15.6634 17.4386 9.52008 15.7181 9.52008C15.4699 9.53344 15.2211 9.53344 14.9729 9.52008C14.9052 9.52008 14.7697 9.26852 14.431 8.91104C13.9297 8.38145 13.3743 7.70621 12.9814 7.33549C12.0197 6.50104 11.2369 5.48852 10.6783 4.3565C10.5707 4.10668 10.4244 3.87448 10.2447 3.66803C10.0191 3.48258 9.72796 3.39116 9.43402 3.41345C9.14008 3.43574 8.86686 3.56995 8.67318 3.78719C8.53278 3.93558 8.41835 4.10556 8.33449 4.2903C8.27968 4.41815 8.23881 4.55128 8.21256 4.6875C8.17621 5.06078 8.20832 5.43741 8.30739 5.79966C8.3941 6.18097 8.51738 6.55301 8.67318 6.91181C8.92788 7.37918 9.22865 7.82272 9.56734 8.23581C9.60914 8.26098 9.6422 8.29789 9.66218 8.34173"
|
||||
stroke="#004B7C"
|
||||
strokeWidth="0.847356"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>19</div>
|
||||
<div>|</div>
|
||||
<div className="font-[700]">Reply</div>
|
||||
<div>•</div>
|
||||
<div>1 reply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -8,6 +8,7 @@ import { Checkbox } from '@gitroom/react/form/checkbox';
|
|||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
|
||||
import { LinkedinDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/linkedin.dto';
|
||||
import { LinkedinPreview } from '@gitroom/frontend/components/new-launch/providers/linkedin/linkedin.preview';
|
||||
|
||||
const LinkedInSettings = () => {
|
||||
const t = useT();
|
||||
|
|
@ -29,7 +30,7 @@ export default withProvider<LinkedinDto>({
|
|||
postComment: PostComment.COMMENT,
|
||||
minimumCharacters: [],
|
||||
SettingsComponent: LinkedInSettings,
|
||||
CustomPreviewComponent: undefined,
|
||||
CustomPreviewComponent: LinkedinPreview,
|
||||
dto: LinkedinDto,
|
||||
checkValidity: async (posts, vals) => {
|
||||
const [firstPost, ...restPosts] = posts;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
import { FC } from 'react';
|
||||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { textSlicer } from '@gitroom/helpers/utils/count.length';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
|
||||
export const PinterestPreview: FC<{
|
||||
maximumCharacters?: number;
|
||||
}> = (props) => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const mediaDir = useMediaDirectory();
|
||||
|
||||
const renderContent = topValue.map((p) => {
|
||||
const newContent = stripHtmlValidation(
|
||||
'normal',
|
||||
p.content.replace(
|
||||
/<span.*?data-mention-id="([.\s\S]*?)"[.\s\S]*?>([.\s\S]*?)<\/span>/gi,
|
||||
(match, match1, match2) => {
|
||||
return `[[[${match2}]]]`;
|
||||
}
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const { start, end } = textSlicer(
|
||||
integration?.identifier || '',
|
||||
props.maximumCharacters || 10000,
|
||||
newContent
|
||||
);
|
||||
|
||||
const finalValue =
|
||||
newContent
|
||||
.slice(start, end)
|
||||
.replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
|
||||
newContent.slice(end).replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`</mark>`;
|
||||
|
||||
return { text: finalValue, images: p.image };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="absolute left-0 top-0 gap-[10px] w-full h-full flex flex-col p-[16px] bg-bgYoutube">
|
||||
<div className="h-[40px] items-center flex">
|
||||
<div className="flex gap-[16px] flex-1 items-center">
|
||||
<div className="flex gap-[8px] items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="22"
|
||||
height="20"
|
||||
viewBox="0 0 22 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.7432 2.88777C8.7438 0.550353 5.40975 -0.0784043 2.90469 2.06197C0.399644 4.20234 0.0469677 7.78093 2.0142 10.3124C3.64982 12.4171 8.59977 16.8561 10.2221 18.2928C10.4036 18.4535 10.4944 18.5339 10.6002 18.5655C10.6926 18.593 10.7937 18.593 10.8861 18.5655C10.9919 18.5339 11.0827 18.4535 11.2642 18.2928C12.8865 16.8561 17.8365 12.4171 19.4721 10.3124C21.4393 7.78093 21.1297 4.17982 18.5816 2.06197C16.0335 -0.0558897 12.7425 0.550353 10.7432 2.88777Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<div>80</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="19"
|
||||
viewBox="0 0 21 19"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M19.358 9.25C19.358 13.9444 15.5524 17.75 10.858 17.75C9.78124 17.75 8.75123 17.5498 7.80318 17.1845C7.62984 17.1178 7.54318 17.0844 7.47426 17.0685C7.40647 17.0529 7.3574 17.0463 7.28788 17.0437C7.21721 17.041 7.13967 17.049 6.98459 17.065L1.86356 17.5944C1.37532 17.6448 1.1312 17.6701 0.987197 17.5822C0.861771 17.5057 0.776342 17.3779 0.753601 17.2328C0.727493 17.0661 0.844148 16.8502 1.07746 16.4184L2.71312 13.3908C2.84782 13.1415 2.91517 13.0168 2.94568 12.8969C2.9758 12.7786 2.98309 12.6932 2.97345 12.5714C2.96369 12.4481 2.90959 12.2876 2.80139 11.9666C2.51387 11.1136 2.35802 10.2 2.35802 9.25C2.35802 4.55558 6.1636 0.75 10.858 0.75C15.5524 0.75 19.358 4.55558 19.358 9.25Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M18.75 9.75V13.95C18.75 15.6302 18.75 16.4702 18.423 17.112C18.1354 17.6765 17.6765 18.1354 17.112 18.423C16.4702 18.75 15.6302 18.75 13.95 18.75H5.55C3.86984 18.75 3.02976 18.75 2.38803 18.423C1.82354 18.1354 1.3646 17.6765 1.07698 17.112C0.75 16.4702 0.75 15.6302 0.75 13.95V9.75M13.75 4.75L9.75 0.75M9.75 0.75L5.75 4.75M9.75 0.75V12.75"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="4"
|
||||
viewBox="0 0 18 4"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.75 2.75C9.30228 2.75 9.75 2.30228 9.75 1.75C9.75 1.19772 9.30228 0.75 8.75 0.75C8.19772 0.75 7.75 1.19772 7.75 1.75C7.75 2.30228 8.19772 2.75 8.75 2.75Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.75 2.75C16.3023 2.75 16.75 2.30228 16.75 1.75C16.75 1.19772 16.3023 0.75 15.75 0.75C15.1977 0.75 14.75 1.19772 14.75 1.75C14.75 2.30228 15.1977 2.75 15.75 2.75Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1.75 2.75C2.30228 2.75 2.75 2.30228 2.75 1.75C2.75 1.19772 2.30228 0.75 1.75 0.75C1.19772 0.75 0.75 1.19772 0.75 1.75C0.75 2.30228 1.19772 2.75 1.75 2.75Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full flex rounded-[12px] text-[16px] font-[600] w-[100px] bg-[#E70024] text-white justify-center items-center">
|
||||
Save
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ background: 'url(/no-video-youtube.png)' }}
|
||||
className="!bg-cover w-full aspect-[calc(16/9)] rounded-[20px] overflow-hidden"
|
||||
>
|
||||
{!!renderContent?.[0]?.images?.[0]?.path && (
|
||||
<VideoOrImage
|
||||
imageClassName="w-full aspect-[calc(16/9)]"
|
||||
videoClassName="w-full aspect-[calc(16/9)] bg-black"
|
||||
autoplay={true}
|
||||
src={mediaDir.set(renderContent?.[0]?.images?.[0]?.path || '')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="mt-[13px] whitespace-pre-line"
|
||||
dangerouslySetInnerHTML={{ __html: renderContent?.[0]?.text || '' }}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -10,6 +10,7 @@ import { PinterestBoard } from '@gitroom/frontend/components/new-launch/provider
|
|||
import { PinterestSettingsDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/pinterest.dto';
|
||||
import { Input } from '@gitroom/react/form/input';
|
||||
import { ColorPicker } from '@gitroom/react/form/color.picker';
|
||||
import { PinterestPreview } from '@gitroom/frontend/components/new-launch/providers/pinterest/pinterest.preview';
|
||||
const PinterestSettings: FC = () => {
|
||||
const { register, control } = useSettings();
|
||||
return (
|
||||
|
|
@ -29,8 +30,9 @@ const PinterestSettings: FC = () => {
|
|||
export default withProvider({
|
||||
postComment: PostComment.COMMENT,
|
||||
minimumCharacters: [],
|
||||
comments: false,
|
||||
SettingsComponent: PinterestSettings,
|
||||
CustomPreviewComponent: undefined,
|
||||
CustomPreviewComponent: PinterestPreview,
|
||||
dto: PinterestSettingsDto,
|
||||
checkValidity: async ([firstItem, ...otherItems]) => {
|
||||
const isMp4 = firstItem?.find((item) => item.path.indexOf('mp4') > -1);
|
||||
|
|
@ -46,9 +48,7 @@ export default withProvider({
|
|||
if (isMp4 && firstItem.length > 2) {
|
||||
return 'If posting a video you can only have two media items';
|
||||
}
|
||||
if (otherItems.length) {
|
||||
return 'Can only have one post';
|
||||
}
|
||||
|
||||
if (
|
||||
firstItem.length > 1 &&
|
||||
firstItem.every((p) => p.path.indexOf('mp4') == -1)
|
||||
|
|
|
|||
|
|
@ -200,7 +200,9 @@ export const ShowAllProviders = forwardRef((props, ref) => {
|
|||
)}
|
||||
</div>
|
||||
) : (
|
||||
<GeneralPreviewComponent maximumCharacters={100000000} />
|
||||
<div className="border border-borderPreview rounded-[12px] shadow-previewShadow">
|
||||
<GeneralPreviewComponent maximumCharacters={100000000} />
|
||||
</div>
|
||||
)}
|
||||
</IntegrationContext.Provider>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,183 @@
|
|||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { textSlicer } from '@gitroom/helpers/utils/count.length';
|
||||
import { FC, ReactNode } from 'react';
|
||||
import { SliderComponent } from '@gitroom/frontend/components/third-parties/slider.component';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
|
||||
const TikTokItem: FC<{ icon: ReactNode; num: string }> = ({ icon, num }) => {
|
||||
return (
|
||||
<div className="flex items-center flex-col">
|
||||
<div className="w-[29px] h-[29px] rounded-full bg-bgTiktokItem flex justify-center items-center text-bgTiktokItemIcon">
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-[8px] font-[700] text-bgTiktokItemIcon">{num}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const TiktokPreview: FC<{
|
||||
maximumCharacters?: number;
|
||||
}> = (props) => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const current = useLaunchStore((state) => state.current);
|
||||
const mediaDir = useMediaDirectory();
|
||||
|
||||
const renderContent = topValue.map((p) => {
|
||||
const newContent = stripHtmlValidation(
|
||||
'normal',
|
||||
p.content.replace(
|
||||
/<span.*?data-mention-id="([.\s\S]*?)"[.\s\S]*?>([.\s\S]*?)<\/span>/gi,
|
||||
(match, match1, match2) => {
|
||||
return `[[[${match2}]]]`;
|
||||
}
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const { start, end } = textSlicer(
|
||||
integration?.identifier || '',
|
||||
props.maximumCharacters || 10000,
|
||||
newContent
|
||||
);
|
||||
|
||||
const finalValue =
|
||||
newContent
|
||||
.slice(start, end)
|
||||
.replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
|
||||
newContent.slice(end).replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`</mark>`;
|
||||
|
||||
return { text: finalValue, images: p.image };
|
||||
});
|
||||
return (
|
||||
<div className="p-[15px] absolute left-0 top-0 w-full h-full flex justify-center bg-newBgColorInner">
|
||||
<div className="relative">
|
||||
<SliderComponent
|
||||
list={renderContent?.[0]?.images.map((image, index) => (
|
||||
<a
|
||||
key={`image_${index}`}
|
||||
className="flex-1"
|
||||
href={mediaDir.set(image.path)}
|
||||
target="_blank"
|
||||
>
|
||||
<VideoOrImage autoplay={true} src={mediaDir.set(image.path)} />
|
||||
</a>
|
||||
))}
|
||||
className="h-full bg-black aspect-[calc(9/16)] rounded-[3px] overflow-hidden"
|
||||
/>
|
||||
<div className="absolute pointer-events-none w-full h-full start-0 top-0 px-[12px] py-[25px] justify-end items-start text-white flex flex-col">
|
||||
<div className="text-[14px] font-[500]">@{integration?.name}</div>
|
||||
<div className="text-[13px] font-[400] whitespace-pre-line line-clamp-6 w-full"
|
||||
dangerouslySetInnerHTML={{ __html: renderContent?.[0]?.text || '' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-end gap-[10px] ml-[18px]">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full z-[2] w-[29px] h-[29px]"
|
||||
/>
|
||||
<div className="absolute left-[50%] -translate-x-[50%] bottom-0 translate-y-[50%] z-[1]">
|
||||
<svg
|
||||
width="13"
|
||||
height="13"
|
||||
viewBox="0 0 13 13"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="6.42665" cy="6.42665" r="6.42665" fill="#EA4359" />
|
||||
<path
|
||||
d="M8.53954 5.78529H7.06717V4.31274C7.06717 3.95875 6.78003 3.67188 6.42627 3.67188C6.07226 3.67188 5.78538 3.95876 5.78538 4.31274V5.78529H4.31277C3.95876 5.78529 3.67188 6.07218 3.67188 6.42615C3.67188 6.78015 3.95878 7.06702 4.31277 7.06702H5.78538V8.53956C5.78538 8.89356 6.07228 9.18043 6.42627 9.18043C6.78027 9.18043 7.06717 8.89354 7.06717 8.53956V7.06702H8.53954C8.89355 7.06702 9.18043 6.78013 9.18043 6.42615C9.18043 6.07216 8.89353 5.78529 8.53954 5.78529Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<TikTokItem
|
||||
num="1.3M"
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="13"
|
||||
viewBox="0 0 14 13"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M6.73271 12.3432C6.54684 12.3432 6.36164 12.274 6.20938 12.1348C5.66959 11.6478 5.14626 11.1786 4.67368 10.7786C3.32385 9.57933 2.14275 8.55317 1.33269 7.54467C0.421822 6.41466 0 5.33697 0 4.17236C0 3.02468 0.371068 1.98152 1.06313 1.21694C1.75518 0.434621 2.7168 0 3.76278 0C4.53921 0 5.24773 0.260773 5.87189 0.747687C6.19221 1.00846 6.47958 1.30386 6.73268 1.66922C6.98577 1.30386 7.27247 1.00846 7.59346 0.747687C8.21762 0.243805 8.92615 0 9.70257 0C10.7486 0 11.6937 0.434621 12.4022 1.21694C13.0943 1.98159 13.4654 3.04235 13.4654 4.17236C13.4654 5.35467 13.0435 6.41466 12.1327 7.54467C11.3226 8.55313 10.1415 9.57853 8.79167 10.7786C8.33624 11.1786 7.79644 11.6478 7.25597 12.1348C7.10372 12.274 6.91852 12.3432 6.73264 12.3432H6.73271Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<TikTokItem
|
||||
num="10.7M"
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="14"
|
||||
viewBox="0 0 15 14"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7.03906 0C10.9263 0.000164123 14.0771 2.70127 14.0771 6.0332C14.0771 6.9371 13.8434 7.79378 13.4277 8.56348C13.4272 8.56492 13.4274 8.56696 13.4268 8.56836C12.6717 10.1862 11.4147 11.5178 9.84277 12.3643L8.0918 13.3076C7.64292 13.5491 7.10605 13.1896 7.1582 12.6826L7.22168 12.0615C7.16098 12.0629 7.10014 12.0664 7.03906 12.0664C3.15189 12.0664 0.000323506 9.365 0 6.0332C0 2.70117 3.15169 0 7.03906 0ZM3.41895 5.22852C2.86382 5.22876 2.41406 5.67919 2.41406 6.23438C2.41423 6.78942 2.86392 7.23901 3.41895 7.23926C3.97418 7.23926 4.42464 6.78957 4.4248 6.23438C4.4248 5.67904 3.97428 5.22852 3.41895 5.22852ZM7.03711 5.22852C6.48177 5.22852 6.03125 5.67904 6.03125 6.23438C6.03143 6.78956 6.48188 7.23926 7.03711 7.23926C7.59219 7.23908 8.04181 6.78945 8.04199 6.23438C8.04199 5.67915 7.5923 5.22869 7.03711 5.22852ZM10.6582 5.22852C10.1029 5.22852 9.65234 5.67904 9.65234 6.23438C9.65251 6.78957 10.103 7.23926 10.6582 7.23926C11.2133 7.23914 11.6629 6.7895 11.6631 6.23438C11.6631 5.67911 11.2134 5.22864 10.6582 5.22852Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<TikTokItem
|
||||
num="1.2M"
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="11"
|
||||
height="12"
|
||||
viewBox="0 0 11 12"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.09766 0C9.37507 0.000192409 10.4129 1.04397 10.4189 2.31543V10.7666C10.4189 11.852 9.6448 12.3079 8.69727 11.7803L5.77051 10.1543C5.46465 9.98038 4.96034 9.98042 4.64844 10.1543L1.72168 11.7803C0.77405 12.3021 8.98228e-05 11.8461 0 10.7666V2.31543C0 1.04385 1.03786 0 2.31543 0H8.09766Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<TikTokItem
|
||||
num="1.2M"
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="12"
|
||||
viewBox="0 0 15 12"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M14.4733 6.3949L9.33173 11.5364C9.12172 11.7465 8.80634 11.8091 8.5316 11.6955C8.25755 11.5819 8.07853 11.314 8.07853 11.0173V8.82547C3.18623 8.99211 1.26785 10.7872 1.24864 10.8064H1.24795C1.0159 11.0323 0.662667 11.0791 0.378972 10.9221C0.0952775 10.7644 -0.0520695 10.4401 0.0167829 10.1234C0.0319314 10.0538 1.57984 3.43187 8.07847 2.96368V0.734176C8.07847 0.437402 8.2575 0.169555 8.53155 0.055929C8.80629 -0.0576845 9.12166 0.00497537 9.33167 0.214988L14.4732 5.35653C14.6109 5.49425 14.6887 5.68084 14.6887 5.87571C14.6887 6.07058 14.6109 6.25718 14.4732 6.39489L14.4733 6.3949Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full relative z-[2] w-[29px] h-[29px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -2,11 +2,7 @@
|
|||
|
||||
import {
|
||||
FC,
|
||||
ReactEventHandler,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import {
|
||||
PostComment,
|
||||
|
|
@ -15,75 +11,13 @@ import {
|
|||
import { TikTokDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/tiktok.dto';
|
||||
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
|
||||
import { Select } from '@gitroom/react/form/select';
|
||||
import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
|
||||
import { Checkbox } from '@gitroom/react/form/checkbox';
|
||||
import clsx from 'clsx';
|
||||
import { useT } from '@gitroom/react/translation/get.transation.service.client';
|
||||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { Input } from '@gitroom/react/form/input';
|
||||
import { TiktokPreview } from '@gitroom/frontend/components/new-launch/providers/tiktok/tiktok.preview';
|
||||
|
||||
const CheckTikTokValidity: FC<{
|
||||
picture: string;
|
||||
}> = (props) => {
|
||||
const { register } = useSettings();
|
||||
const t = useT();
|
||||
|
||||
const func = useCustomProviderFunction();
|
||||
const [maxVideoLength, setMaxVideoLength] = useState(0);
|
||||
const [isValidVideo, setIsValidVideo] = useState<undefined | boolean>(
|
||||
undefined
|
||||
);
|
||||
const registerVideo = register('isValidVideo');
|
||||
const video = useMemo(() => {
|
||||
return props.picture;
|
||||
}, [props.picture]);
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
const loadStats = useCallback(async () => {
|
||||
const { maxDurationSeconds } = await func.get('maxVideoLength');
|
||||
// setMaxVideoLength(5);
|
||||
setMaxVideoLength(maxDurationSeconds);
|
||||
}, []);
|
||||
const loadVideo: ReactEventHandler<HTMLVideoElement> = useCallback(
|
||||
(e) => {
|
||||
// @ts-ignore
|
||||
setIsValidVideo(e.target.duration <= maxVideoLength);
|
||||
registerVideo.onChange({
|
||||
target: {
|
||||
name: 'isValidVideo',
|
||||
// @ts-ignore
|
||||
value: String(e.target.duration <= maxVideoLength),
|
||||
},
|
||||
});
|
||||
},
|
||||
[maxVideoLength, registerVideo]
|
||||
);
|
||||
if (!maxVideoLength || !video || video.indexOf('mp4') === -1) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{isValidVideo === false && (
|
||||
<div className="text-red-600 my-[20px]">
|
||||
{t(
|
||||
'video_length_is_invalid_must_be_up_to',
|
||||
'Video length is invalid, must be up to'
|
||||
)}
|
||||
{maxVideoLength}
|
||||
{t('seconds', 'seconds')}
|
||||
</div>
|
||||
)}
|
||||
<video
|
||||
controls
|
||||
onLoadedMetadata={loadVideo}
|
||||
className="w-0 h-0 overflow-hidden pointer-events-none"
|
||||
>
|
||||
<source src={video} type="video/mp4" />
|
||||
</video>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const TikTokSettings: FC<{
|
||||
values?: any;
|
||||
}> = (props) => {
|
||||
|
|
@ -288,7 +222,7 @@ const TikTokSettings: FC<{
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx(!disclose && 'invisible', 'mt-[20px]')}>
|
||||
<div className={clsx(!disclose && 'invisible h-0 overflow-hidden', 'mt-[20px]')}>
|
||||
<Checkbox
|
||||
variant="hollow"
|
||||
label={t('label_your_brand', 'Your brand')}
|
||||
|
|
@ -364,13 +298,11 @@ export default withProvider({
|
|||
postComment: PostComment.COMMENT,
|
||||
minimumCharacters: [],
|
||||
SettingsComponent: TikTokSettings,
|
||||
CustomPreviewComponent: undefined,
|
||||
comments: false,
|
||||
CustomPreviewComponent: TiktokPreview,
|
||||
dto: TikTokDto,
|
||||
checkValidity: async (items) => {
|
||||
const [firstItems] = items;
|
||||
if (items.length !== 1) {
|
||||
return 'Should have one item';
|
||||
}
|
||||
if (firstItems.length === 0) {
|
||||
return 'No video / images selected';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
import { FC } from 'react';
|
||||
import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
|
||||
import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store';
|
||||
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
|
||||
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
|
||||
import { textSlicer } from '@gitroom/helpers/utils/count.length';
|
||||
import { VideoOrImage } from '@gitroom/react/helpers/video.or.image';
|
||||
|
||||
export const YoutubePreview: FC<{
|
||||
maximumCharacters?: number;
|
||||
}> = (props) => {
|
||||
const { value: topValue, integration } = useIntegration();
|
||||
const current = useLaunchStore((state) => state.current);
|
||||
const mediaDir = useMediaDirectory();
|
||||
|
||||
const renderContent = topValue.map((p) => {
|
||||
const newContent = stripHtmlValidation(
|
||||
'normal',
|
||||
p.content.replace(
|
||||
/<span.*?data-mention-id="([.\s\S]*?)"[.\s\S]*?>([.\s\S]*?)<\/span>/gi,
|
||||
(match, match1, match2) => {
|
||||
return `[[[${match2}]]]`;
|
||||
}
|
||||
),
|
||||
true
|
||||
);
|
||||
|
||||
const { start, end } = textSlicer(
|
||||
integration?.identifier || '',
|
||||
props.maximumCharacters || 10000,
|
||||
newContent
|
||||
);
|
||||
|
||||
const finalValue =
|
||||
newContent
|
||||
.slice(start, end)
|
||||
.replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`<mark class="bg-red-500" data-tooltip-id="tooltip" data-tooltip-content="This text will be cropped">` +
|
||||
newContent.slice(end).replace(/\[\[\[([.\s\S]*?)]]]/, (match, match1) => {
|
||||
return `<span class="font-bold font-[arial]" style="color: #ae8afc">${match1}</span>`;
|
||||
}) +
|
||||
`</mark>`;
|
||||
|
||||
return { text: finalValue, images: p.image };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="absolute left-0 top-0 gap-[12px] w-full h-full flex flex-col p-[16px] bg-bgYoutube">
|
||||
<div
|
||||
style={{ background: 'url(/no-video-youtube.png)' }}
|
||||
className="!bg-cover w-full aspect-[calc(16/9)] rounded-[4px] overflow-hidden"
|
||||
>
|
||||
{!!renderContent?.[0]?.images?.[0]?.path && (
|
||||
<VideoOrImage
|
||||
imageClassName="w-full aspect-[calc(16/9)]"
|
||||
videoClassName="w-full aspect-[calc(16/9)] bg-black"
|
||||
autoplay={true}
|
||||
src={mediaDir.set(renderContent?.[0]?.images?.[0]?.path || '')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex flex-1 gap-[17px] items-center">
|
||||
<div>
|
||||
<img
|
||||
src={integration?.picture || '/no-picture.jpg'}
|
||||
alt="social"
|
||||
className="rounded-full z-[2] w-[40px] h-[40px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-[14px] font-[500]">{integration?.name}</div>
|
||||
<div className="text-[10px] font-[400]">16.7M subscribers</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="h-[32px] text-[12px] text-newBgColor font-[500] px-[14px] flex justify-center items-center bg-youtubeButton rounded-[16px]">
|
||||
Subscribe
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="gap-[4px] flex items-center text-youtubeSvg">
|
||||
<div className="bg-youtubeBgAction text-[13px] px-[9px] h-[32px] rounded-[16px] flex items-center">
|
||||
<svg
|
||||
className="mr-[9px]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="15"
|
||||
viewBox="0 0 16 15"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M13.7503 6.1035H10.0621L11.3874 1.79617C11.6664 0.898087 10.934 0 9.92255 0C9.41684 0 8.92855 0.209263 8.59722 0.566754L3.48772 6.1035H0V14.8228H3.48772H4.35965H12.5819C13.5062 14.8228 14.3084 14.2386 14.4915 13.419L15.6598 8.18742C15.8953 7.10622 14.9797 6.1035 13.7503 6.1035ZM3.48772 13.9509H0.871929V6.97543H3.48772V13.9509ZM14.8054 7.99559L13.637 13.2272C13.5498 13.6457 13.1051 13.9509 12.5819 13.9509H4.35965V6.44356L9.24245 1.15967C9.40812 0.976561 9.66098 0.871929 9.92255 0.871929C10.1493 0.871929 10.3585 0.967842 10.4719 1.13351C10.5329 1.2207 10.6027 1.36021 10.5503 1.54331L9.22501 5.85065L8.87624 6.97543H10.0533H13.7416C14.0991 6.97543 14.4391 7.12366 14.6397 7.37652C14.753 7.50731 14.8664 7.72529 14.8054 7.99559Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<div className="mr-[14px]">205K</div>
|
||||
<div className="h-[20px] w-[1px] bg-[#A0A0A0] mr-[12px]" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="15"
|
||||
viewBox="0 0 16 15"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12.2092 0H11.3373H3.11498C2.18201 0 1.38856 0.584193 1.20545 1.40381L0.0370652 6.63538C-0.198356 7.71657 0.71717 8.71929 1.94659 8.71929H5.63485L4.30952 13.0266C4.0305 13.9247 4.76292 14.8228 5.77436 14.8228C6.28008 14.8228 6.76836 14.6135 7.09969 14.256L12.2092 8.71929H15.6969V0H12.2092ZM6.45446 13.6631C6.2888 13.8462 6.03594 13.9509 5.77436 13.9509C5.54766 13.9509 5.33839 13.855 5.22504 13.6893C5.16401 13.6021 5.09425 13.4626 5.14657 13.2795L6.4719 8.97215L6.82067 7.84736H5.63485H1.94659C1.5891 7.84736 1.24905 7.69913 1.0485 7.44628C0.943871 7.31549 0.830521 7.0975 0.891556 6.81849L2.05994 1.58691C2.14713 1.1771 2.59182 0.871929 3.11498 0.871929H11.3373V8.37924L6.45446 13.6631ZM14.825 7.84736H12.2092V0.871929H14.825V7.84736Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="h-[32px] w-[32px] rounded-full bg-youtubeBgAction flex justify-center items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="16"
|
||||
viewBox="0 0 18 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M11.3351 2.29317L16.2702 7.84736L11.3351 13.4016V10.4632V9.59122H10.4632C7.01031 9.59122 4.23758 10.4632 1.96184 12.2855C3.56619 8.73673 6.4174 6.70514 10.5852 6.09479L11.3351 5.98143V5.23158V2.29317ZM10.4632 0V5.23158C3.67954 6.21686 0.967841 10.7509 0 15.6947C2.42396 12.2332 5.61522 10.4632 10.4632 10.4632V15.6947L17.4386 7.84736L10.4632 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="h-[32px] w-[32px] rounded-full bg-youtubeBgAction flex justify-center items-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="3"
|
||||
viewBox="0 0 14 3"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M2.61579 1.30789C2.61579 2.03159 2.03159 2.61579 1.30789 2.61579C0.584193 2.61579 0 2.03159 0 1.30789C0 0.584193 0.584193 0 1.30789 0C2.03159 0 2.61579 0.584193 2.61579 1.30789ZM6.53947 0C5.81577 0 5.23158 0.584193 5.23158 1.30789C5.23158 2.03159 5.81577 2.61579 6.53947 2.61579C7.26317 2.61579 7.84736 2.03159 7.84736 1.30789C7.84736 0.584193 7.26317 0 6.53947 0ZM11.771 0C11.0473 0 10.4632 0.584193 10.4632 1.30789C10.4632 2.03159 11.0473 2.61579 11.771 2.61579C12.4947 2.61579 13.0789 2.03159 13.0789 1.30789C13.0789 0.584193 12.4947 0 11.771 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-youtubeBgAction rounded-[12px] p-[12px] text-[12px] font-[400] whitespace-pre-line"
|
||||
dangerouslySetInnerHTML={{ __html: renderContent?.[0]?.text }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -11,6 +11,7 @@ import { Input } from '@gitroom/react/form/input';
|
|||
import { MediumTags } from '@gitroom/frontend/components/new-launch/providers/medium/medium.tags';
|
||||
import { MediaComponent } from '@gitroom/frontend/components/media/media.component';
|
||||
import { Select } from '@gitroom/react/form/select';
|
||||
import { YoutubePreview } from '@gitroom/frontend/components/new-launch/providers/youtube/youtube.preview';
|
||||
const type = [
|
||||
{
|
||||
label: 'Public',
|
||||
|
|
@ -81,15 +82,13 @@ const YoutubeSettings: FC = () => {
|
|||
};
|
||||
export default withProvider({
|
||||
postComment: PostComment.COMMENT,
|
||||
comments: false,
|
||||
minimumCharacters: [],
|
||||
SettingsComponent: YoutubeSettings,
|
||||
CustomPreviewComponent: undefined,
|
||||
CustomPreviewComponent: YoutubePreview,
|
||||
dto: YoutubeSettingsDto,
|
||||
checkValidity: async (items) => {
|
||||
const [firstItems] = items;
|
||||
if (items.length !== 1) {
|
||||
return 'Should have one item';
|
||||
}
|
||||
if (items[0].length !== 1) {
|
||||
return 'You need one media';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ interface StoreState {
|
|||
tags: { label: string; value: string }[];
|
||||
tab: 0 | 1;
|
||||
current: string;
|
||||
comments: boolean | 'no-media';
|
||||
locked: boolean;
|
||||
hide: boolean;
|
||||
setLocked: (locked: boolean) => void;
|
||||
|
|
@ -125,12 +126,14 @@ interface StoreState {
|
|||
setLoaded?: (loaded: boolean) => void;
|
||||
setChars: (id: string, chars: number) => void;
|
||||
chars: Record<string, number>;
|
||||
setComments: (comments: boolean | 'no-media') => void;
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
editor: undefined as undefined,
|
||||
loaded: true,
|
||||
dummy: false,
|
||||
comments: true,
|
||||
activateExitButton: true,
|
||||
date: newDayjs(),
|
||||
postComment: PostComment.ALL,
|
||||
|
|
@ -550,4 +553,8 @@ export const useLaunchStore = create<StoreState>()((set) => ({
|
|||
[id]: chars,
|
||||
},
|
||||
})),
|
||||
setComments: (comments: boolean | 'no-media') =>
|
||||
set((state) => ({
|
||||
comments,
|
||||
})),
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
import { FC, ReactNode, useCallback, useState } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from '@gitroom/frontend/components/ui/icons';
|
||||
|
||||
export const SliderComponent: FC<{
|
||||
className: string;
|
||||
list: ReactNode[];
|
||||
}> = ({ className, list }) => {
|
||||
const [show, setShow] = useState(0);
|
||||
|
||||
const goToPrevious = useCallback(() => {
|
||||
setShow((prev) => (prev > 0 ? prev - 1 : prev));
|
||||
}, []);
|
||||
|
||||
const goToNext = useCallback(() => {
|
||||
setShow((prev) => (prev < list.length - 1 ? prev + 1 : prev));
|
||||
}, [list.length]);
|
||||
|
||||
const canGoPrevious = show > 0;
|
||||
const canGoNext = show < list.length - 1;
|
||||
|
||||
return (
|
||||
<div className={clsx(className, 'relative')}>
|
||||
{list[show]}
|
||||
|
||||
{/* Left Arrow */}
|
||||
{canGoPrevious && (
|
||||
<button
|
||||
onClick={goToPrevious}
|
||||
className="absolute top-[50%] start-[10px] -translate-y-[50%] flex items-center justify-center w-8 h-8 rounded-full bg-black/60 hover:bg-black/80 text-white transition-colors backdrop-blur-sm cursor-pointer"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<ChevronLeftIcon size={18} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Right Arrow */}
|
||||
{canGoNext && (
|
||||
<button
|
||||
onClick={goToNext}
|
||||
className="absolute top-[50%] end-[10px] -translate-y-[50%] flex items-center justify-center w-8 h-8 rounded-full bg-black/60 hover:bg-black/80 text-white transition-colors backdrop-blur-sm cursor-pointer"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<ChevronRightIcon size={18} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Pagination Dots */}
|
||||
{list.length > 1 && (
|
||||
<div className="absolute bottom-[10px] left-[50%] -translate-x-[50%] flex gap-2">
|
||||
{list.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setShow(index)}
|
||||
className={clsx(
|
||||
'w-2 h-2 rounded-full transition-colors cursor-pointer',
|
||||
index === show
|
||||
? 'bg-white'
|
||||
: 'bg-transparent border border-white'
|
||||
)}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useHasScroll(
|
||||
ref: React.RefObject<HTMLElement>,
|
||||
) {
|
||||
const [hasScroll, setHasScroll] = useState(false);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const check = () => setHasScroll(el.scrollHeight > el.clientHeight);
|
||||
check();
|
||||
|
||||
const observer = new MutationObserver(check);
|
||||
observer.observe(el, { childList: true, subtree: true });
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [ref]);
|
||||
|
||||
return hasScroll;
|
||||
}
|
||||
|
|
@ -100,6 +100,19 @@ module.exports = {
|
|||
menuDotsHover: 'var(--new-menu-hover)',
|
||||
bigStrip: 'var(--new-big-strips)',
|
||||
popup: 'var(--popup-color)',
|
||||
bgLinkedin: 'var(--linkedin-bg)',
|
||||
bgFacebook: 'var(--facebook-bg)',
|
||||
bgInstagram: 'var(--instagram-bg)',
|
||||
bgTiktokItem: 'var(--tiktok-item-bg)',
|
||||
bgTiktokItemIcon: 'var(--tiktok-item-icon-bg)',
|
||||
bgYoutube: 'var(--youtube-bg)',
|
||||
bgCommentFacebook: 'var(--facebook-bg-comment)',
|
||||
textLinkedin: 'var(--linkedin-text)',
|
||||
borderPreview: 'var(--border-preview)',
|
||||
borderLinkedin: 'var(--linkedin-border)',
|
||||
youtubeButton: 'var(--youtube-button)',
|
||||
youtubeBgAction: 'var(--youtube-action-color)',
|
||||
youtubeSvg: 'var(--youtube-svg-border)',
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
13: 'repeat(13, minmax(0, 1fr));',
|
||||
|
|
@ -129,6 +142,7 @@ module.exports = {
|
|||
yellowToast: '0px 0px 50px rgba(252, 186, 3, 0.3)',
|
||||
greenToast: '0px 0px 50px rgba(60, 124, 90, 0.3)',
|
||||
menu: 'var(--menu-shadow)',
|
||||
previewShadow: 'var(--preview-box-shadow)',
|
||||
},
|
||||
// that is actual animation
|
||||
keyframes: (theme) => ({
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@ export const VideoOrImage: FC<{
|
|||
src: string;
|
||||
autoplay: boolean;
|
||||
isContain?: boolean;
|
||||
imageClassName?: string;
|
||||
videoClassName?: string;
|
||||
}> = (props) => {
|
||||
const { src, autoplay, isContain } = props;
|
||||
const { src, autoplay, isContain, imageClassName, videoClassName } = props;
|
||||
if (src?.indexOf('mp4') > -1) {
|
||||
return (
|
||||
<video
|
||||
src={src}
|
||||
autoPlay={autoplay}
|
||||
className="w-full h-full"
|
||||
className={clsx('w-full h-full', videoClassName)}
|
||||
muted={true}
|
||||
loop={true}
|
||||
/>
|
||||
|
|
@ -21,7 +23,8 @@ export const VideoOrImage: FC<{
|
|||
<img
|
||||
className={clsx(
|
||||
isContain ? 'object-contain' : 'object-cover',
|
||||
'w-full h-full'
|
||||
'w-full h-full',
|
||||
imageClassName
|
||||
)}
|
||||
src={src}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue