Merge pull request #35 from BinaryStudioAcademy/task/OV-27-add-studio…

…-page OV-27: Add studio page
BinaryStudioAcademy · Aug 21, 2024 · 009d04a · 009d04a
2 parents b1dee31 + eff4222
commit 009d04a
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 13 deletions.
diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx
@@ -6,6 +6,7 @@ import {
 type Properties = {
     label: string;
     type?: 'button' | 'submit';
+    variant?: string;
     size?: 'md' | 'lg';
     isDisabled?: boolean;
     sx?: SystemStyleObject;
@@ -14,13 +15,15 @@ type Properties = {
 const Button: React.FC<Properties> = ({
     label,
     type = 'button',
+    variant = 'solid',
     size = 'md',
     isDisabled = false,
     sx = {},
 }) => (
     <LibraryButton
         type={type}
-        width="full"
+        w="full"
+        variant={variant}
         size={size}
         isDisabled={isDisabled}
         sx={sx}

diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
@@ -6,6 +6,7 @@ export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export { VideoModal } from './video-modal/video-modal.js';
+export { DownloadIcon } from '@chakra-ui/icons';
 export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 export {
     Box,

diff --git a/frontend/src/bundles/common/components/header/header.tsx b/frontend/src/bundles/common/components/header/header.tsx
@@ -1,31 +1,36 @@
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 
-const Header = (): JSX.Element => {
+type Properties = {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+};
+
+const Header: React.FC<Properties> = ({ left, center, right }) => {
     return (
         <Flex
             as="header"
             height="75px"
             position="sticky"
             top="0"
             left="0"
-            width="100%"
+            width="full"
             backgroundColor="background.900"
-            color="white"
             boxShadow="md"
             zIndex="1000"
             padding="4"
             marginBottom="20px"
+            alignItems="center"
+            justifyContent="space-between"
         >
-            <Flex
-                width="full"
-                alignItems="center"
-                maxWidth="1440px"
-                justifyContent="space-between"
-            >
-                <Text fontSize="xl" fontWeight="lighter">
+            {left ?? (
+                // {/* TODO: Add logo */}
+                <Text fontSize="xl" fontWeight="lighter" color="white">
                     Logo
                 </Text>
-            </Flex>
+            )}
+            <Box>{center}</Box>
+            <Box>{right}</Box>
         </Flex>
     );
 };

diff --git a/frontend/src/bundles/common/enums/app-route.enum.ts b/frontend/src/bundles/common/enums/app-route.enum.ts
@@ -2,6 +2,7 @@ const AppRoute = {
     ROOT: '/',
     SIGN_IN: '/sign-in',
     SIGN_UP: '/sign-up',
+    STUDIO: '/studio',
 } as const;
 
 export { AppRoute };
diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
@@ -0,0 +1,31 @@
+import {
+    Button,
+    DownloadIcon,
+    Header,
+    IconButton,
+} from '~/bundles/common/components/components.js';
+
+const Studio: React.FC = () => {
+    return (
+        <>
+            <Header
+                center={
+                    <Button
+                        variant="primaryOutlined"
+                        label="Resize"
+                        sx={{ width: '135px' }}
+                    />
+                }
+                right={
+                    <IconButton
+                        variant="primaryOutlined"
+                        aria-label="Download"
+                        icon={<DownloadIcon />}
+                    />
+                }
+            />
+        </>
+    );
+};
+
+export { Studio };
diff --git a/frontend/src/framework/theme/styles/components.styles.ts b/frontend/src/framework/theme/styles/components.styles.ts
@@ -66,6 +66,19 @@ const components = {
                     },
                 },
             },
+            primaryOutlined: {
+                color: colors.background[300],
+                border: '1px solid',
+                borderColor: colors.background[300],
+                _hover: {
+                    color: 'white',
+                    bg: colors.background[300],
+                    _disabled: {
+                        color: colors.background[300],
+                        bg: 'none',
+                    },
+                },
+            },
             ghostIcon: {
                 color: colors.white,
                 _hover: {

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -9,6 +9,7 @@ import {
     StoreProvider,
 } from '~/bundles/common/components/components.js';
 import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { Studio } from '~/bundles/studio/pages/studio.js';
 import { store } from '~/framework/store/store.js';
 import { theme } from '~/framework/theme/theme.js';
 
@@ -29,6 +30,10 @@ const routes = [
                 path: AppRoute.SIGN_UP,
                 element: <Auth />,
             },
+            {
+                path: AppRoute.STUDIO,
+                element: <Studio />,
+            },
         ],
     },
 ];