diff --git a/frontend/src/bundles/common/helpers/helpers.ts b/frontend/src/bundles/common/helpers/helpers.ts index c2872899c..33ace1c0e 100644 --- a/frontend/src/bundles/common/helpers/helpers.ts +++ b/frontend/src/bundles/common/helpers/helpers.ts @@ -1,2 +1,6 @@ -export { isEmptyArray,isNullOrUndefined, isStringNullOrEmpty } from './utilities.js'; +export { + isEmptyArray, + isNullOrUndefined, + isStringNullOrEmpty, +} from './utilities.js'; export { configureString } from 'shared'; diff --git a/frontend/src/bundles/common/helpers/utilities.ts b/frontend/src/bundles/common/helpers/utilities.ts index 913288a3f..fdd22fd1f 100644 --- a/frontend/src/bundles/common/helpers/utilities.ts +++ b/frontend/src/bundles/common/helpers/utilities.ts @@ -1,9 +1,13 @@ -const isNullOrUndefined = (value: T | null | undefined): value is null | undefined => - value === undefined || value === null; +const isNullOrUndefined = ( + value: T | null | undefined, +): value is null | undefined => value === undefined || value === null; -const isStringNullOrEmpty = (value: string | null | undefined): value is null | undefined => - isNullOrUndefined(value) || (value ).trim().length === 0; +const isStringNullOrEmpty = ( + value: string | null | undefined, +): value is null | undefined => + isNullOrUndefined(value) || value.trim().length === 0; -const isEmptyArray = (value: T[]): boolean => isNullOrUndefined(value) || value.length === 0; +const isEmptyArray = (value: T[]): boolean => + isNullOrUndefined(value) || value.length === 0; export { isEmptyArray, isNullOrUndefined, isStringNullOrEmpty }; diff --git a/frontend/src/bundles/video-editor/components/menu/menu.tsx b/frontend/src/bundles/video-editor/components/menu/menu.tsx index 3619fdb7a..5784d74eb 100644 --- a/frontend/src/bundles/video-editor/components/menu/menu.tsx +++ b/frontend/src/bundles/video-editor/components/menu/menu.tsx @@ -1,5 +1,8 @@ import { Box, Flex, VStack } from '~/bundles/common/components/components.js'; -import { isEmptyArray, isNullOrUndefined } from '~/bundles/common/helpers/helpers.js'; +import { + isEmptyArray, + isNullOrUndefined, +} from '~/bundles/common/helpers/helpers.js'; import { useCallback } from '~/bundles/common/hooks/hooks.js'; import { type MenuItem } from '../../types/types.js'; @@ -10,21 +13,28 @@ type MenuProperties = { setActiveIndex: (index: number) => void; }; -const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) => { +const Menu: React.FC = ({ + items, + activeIndex, + setActiveIndex, +}) => { const handleClick = useCallback( (index: number) => { return () => { - if (isEmptyArray(items) || index >= items.length) - {return;} + if (isEmptyArray(items) || index >= items.length) { + return; + } const item = items[index]; - if(isNullOrUndefined(item)) {return;} + if (isNullOrUndefined(item)) { + return; + } setActiveIndex(index); item.onClick(); }; }, - [setActiveIndex, items] + [setActiveIndex, items], ); return ( = ({ items, activeIndex, setActiveIndex }) gap: 1, cursor: 'pointer', borderRadius: '8px', - bg: activeIndex === index ? 'background.600' : 'transparent', + bg: + activeIndex === index + ? 'background.600' + : 'transparent', _hover: { bg: 'background.600', }, @@ -62,14 +75,14 @@ const Menu: React.FC = ({ items, activeIndex, setActiveIndex }) > {item.icon} {item.label} diff --git a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx index 7dcbeb0b9..2a0155255 100644 --- a/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx +++ b/frontend/src/bundles/video-editor/components/mock/menu-mock.tsx @@ -7,9 +7,7 @@ const TemplatesContent: React.FC = () => ( const AvatarsContent: React.FC = () =>
This is the Avatars content.
; const ScriptHeader: React.FC = () => ( -
- Script -
+
Script
diff --git a/frontend/src/bundles/video-editor/pages/video-editor.tsx b/frontend/src/bundles/video-editor/pages/video-editor.tsx index 3ab55053e..9772b983d 100644 --- a/frontend/src/bundles/video-editor/pages/video-editor.tsx +++ b/frontend/src/bundles/video-editor/pages/video-editor.tsx @@ -1,4 +1,10 @@ -import { AssetsIcon, AvatarIcon, ScriptIcon, TemplatesIcon, TextIcon } from '~/bundles/common/components/icons/icons.js'; +import { + AssetsIcon, + AvatarIcon, + ScriptIcon, + TemplatesIcon, + TextIcon, +} from '~/bundles/common/components/icons/icons.js'; import { useCallback, useState } from '~/bundles/common/hooks/hooks.js'; import { Menu, MenuBody } from '../components/components.js'; @@ -17,10 +23,15 @@ const VideoEditor: React.FC = () => { const [activeContent, setActiveContent] = useState( null, ); - const [activeTitle, setActiveTitle] = useState(''); + const [activeTitle, setActiveTitle] = useState( + '', + ); const [isOpen, setIsOpen] = useState(false); - const handleMenuClick = (header: string | React.ReactNode, content: React.ReactNode): void => { + const handleMenuClick = ( + header: string | React.ReactNode, + content: React.ReactNode, + ): void => { setActiveContent(content); setActiveTitle(header); setIsOpen(true); @@ -61,8 +72,16 @@ const VideoEditor: React.FC = () => { return ( <> - - + + {activeContent}