Merge pull request #364 from BinaryStudioAcademy/task/OV-348-create-m…

…odal-warning

OV-348: Create warning modal

frontend/src/bundles/common/icons/icon-name.ts

@@ -8,6 +8,7 @@ import {
     DownloadIcon,
     ViewIcon,
     ViewOffIcon,
+    WarningIcon,
 } from '@chakra-ui/icons';
 
 import { Logo, LogoText, OpenAi } from './custom-icons/custom-icons.js';
@@ -65,6 +66,7 @@ const IconName = {
     LOGO: Logo,
     LOGO_TEXT: LogoText,
     DELETE: DeleteIcon,
+    WARNING: WarningIcon,
 } as const;
 
 export { IconName };

frontend/src/bundles/studio/components/components.ts

@@ -3,3 +3,4 @@ export { PlayerControls } from './player-controls/player-controls.js';
 export { Timeline } from './timeline/timeline.js';
 export { VideoComponent } from './video/video.js';
 export { VideoMenu } from './video-menu/video-menu.js';
+export { WarningModal } from './warning-modal/warning-modal.js';

frontend/src/bundles/studio/components/warning-modal/components/components.ts

@@ -0,0 +1 @@
+export { WarningContent } from './warning-content.js';

frontend/src/bundles/studio/components/warning-modal/components/warning-content.tsx

@@ -0,0 +1,54 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Heading,
+    Icon,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icon-name.js';
+
+type Properties = {
+    onCancel: () => void;
+    onSubmit: () => void;
+};
+
+const WarningContent: React.FC<Properties> = ({ onCancel, onSubmit }) => {
+    return (
+        <>
+            <Heading variant="H3" color="typography.900" mb="20px">
+                Notice before you submit
+            </Heading>
+
+            <Text as="p" color="typography.600" mb="20px">
+                These issues may affect the final outcome of the generated
+                video. It is recommended to update your video before submission.
+            </Text>
+
+            <Box bg="background.50" p="20px 40px" borderRadius="md" mb="20px">
+                <Text variant="H4" color="brand.secondary.300">
+                    <Flex align="center" gap="5px" mb="10px">
+                        <Icon as={IconName.WARNING} /> Overall scene duration
+                        exceeds overall script duration.
+                    </Flex>
+                </Text>
+                <Text as="p" color="typography.600">
+                    The scene duration exceeding the TTS (text to speech) audio
+                    of script will not be included in the final video.
+                </Text>
+            </Box>
+
+            <Flex gap="10px" justify="end">
+                <Button label="Cancel" w="auto" onClick={onCancel} />
+                <Button
+                    label="Submit Anyway"
+                    w="auto"
+                    variant="secondaryOutlined"
+                    onClick={onSubmit}
+                />
+            </Flex>
+        </>
+    );
+};
+
+export { WarningContent };

frontend/src/bundles/studio/components/warning-modal/warning-modal.tsx

@@ -0,0 +1,31 @@
+import {
+    BaseModal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalOverlay,
+} from '~/bundles/common/components/components.js';
+
+import { WarningContent } from './components/components.js';
+
+type Properties = {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: () => void;
+};
+
+const WarningModal: React.FC<Properties> = ({ isOpen, onClose, onSubmit }) => {
+    return (
+        <BaseModal isOpen={isOpen} onClose={onClose} size="xl">
+            <ModalOverlay />
+            <ModalContent>
+                <ModalCloseButton />
+                <ModalBody p="40px">
+                    <WarningContent onCancel={onClose} onSubmit={onSubmit} />
+                </ModalBody>
+            </ModalContent>
+        </BaseModal>
+    );
+};
+
+export { WarningModal };