OV-38: Add homepage

frontend/src/bundles/common/components/components.ts

@@ -10,6 +10,7 @@ export { VideoModal } from './video-modal/video-modal.js';
 export { DownloadIcon } from '@chakra-ui/icons';
 export { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 export {
+    Badge,
     Box,
     Center,
     Circle,
@@ -18,7 +19,9 @@ export {
     FormControl,
     FormErrorMessage,
     Heading,
+    Icon,
     IconButton,
+    Image,
     InputGroup,
     InputRightElement,
     SimpleGrid,

frontend/src/bundles/common/components/header/header.tsx

@@ -19,7 +19,6 @@ const Header: React.FC<Properties> = ({ left, center, right }) => {
             boxShadow="md"
             zIndex="1000"
             padding="4"
-            marginBottom="20px"
             alignItems="center"
             justifyContent="space-between"
         >

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

@@ -0,0 +1,8 @@
+import { faEllipsisVertical, faPen } from '@fortawesome/free-solid-svg-icons';
+
+const IconName = {
+    OPTIONS_VERTICAL: faEllipsisVertical,
+    PEN: faPen,
+} as const;
+
+export { IconName };

frontend/src/bundles/common/icons/icons.ts

@@ -0,0 +1 @@
+export { IconName } from './icon-name.js';

frontend/src/bundles/home/components/components.ts

@@ -0,0 +1,3 @@
+export { MainContent } from './main-content/main-content.js';
+export { VideoCard } from './video-card/video-card.js';
+export { VideoSection } from './video-section/video-section.js';

frontend/src/bundles/home/components/main-content/main-content.tsx

@@ -0,0 +1,14 @@
+import { Box } from '~/bundles/common/components/components.js';
+
+import { VideoSection } from '../components.js';
+
+const MainContent: React.FC = () => {
+    return (
+        <Box bg="background.50" borderRadius="lg" margin="0 25px">
+            <VideoSection />
+            <VideoSection />
+        </Box>
+    );
+};
+
+export { MainContent };

frontend/src/bundles/home/components/video-card/video-card.tsx

@@ -0,0 +1,92 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import photo from '~/assets/img/photo.png';
+import {
+    Box,
+    Flex,
+    Icon,
+    IconButton,
+    Image,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+const VideoCard: React.FC = () => {
+    return (
+        <Box borderRadius="8px" bg="white" padding="7px">
+            <Box position="relative" role="group">
+                <Image src={photo} alt="Video preview" borderRadius="5px" />
+
+                {/* Overlay effect */}
+                <Box
+                    position="absolute"
+                    top="0"
+                    left="0"
+                    width="100%"
+                    height="100%"
+                    bg="rgba(53, 57, 154, 0.3)"
+                    opacity="0"
+                    transition="opacity 0.3s ease"
+                    _groupHover={{ opacity: 1 }}
+                    borderRadius="5px"
+                />
+
+                <IconButton
+                    aria-label="Video options"
+                    position="absolute"
+                    bg="white"
+                    top="5px"
+                    right="5px"
+                    size="xs"
+                    opacity="0"
+                    transition="opacity 0.3s ease"
+                    _groupHover={{ opacity: 1 }}
+                    icon={
+                        <Icon
+                            as={FontAwesomeIcon}
+                            icon={IconName.OPTIONS_VERTICAL}
+                            color="background.600"
+                        />
+                    }
+                />
+
+                <IconButton
+                    aria-label="Edit video"
+                    isRound={true}
+                    size="lg"
+                    position="absolute"
+                    bg="white"
+                    top="50%"
+                    left="calc(50% - 12.5px)"
+                    transform="translate(-50%, -50%)"
+                    opacity="0"
+                    transition="opacity 0.3s ease"
+                    _groupHover={{ opacity: 1 }}
+                    icon={
+                        <Icon
+                            as={FontAwesomeIcon}
+                            icon={IconName.PEN}
+                            color="background.600"
+                        />
+                    }
+                />
+            </Box>
+
+            <Box padding="7px 10px 5px 5px">
+                <Text variant="button" color="typography.900">
+                    Video Name
+                </Text>
+                <Flex justify="space-between">
+                    <Text variant="caption" color="typography.300">
+                        Aug 9, 2024, 1:24 PM
+                    </Text>
+                    <Text variant="caption" color="typography.300">
+                        0,30 sec
+                    </Text>
+                </Flex>
+            </Box>
+        </Box>
+    );
+};
+
+export { VideoCard };

frontend/src/bundles/home/components/video-section/video-section.tsx

@@ -0,0 +1,39 @@
+import {
+    Badge,
+    Box,
+    Flex,
+    Heading,
+    SimpleGrid,
+} from '~/bundles/common/components/components.js';
+
+import { VideoCard } from '../components.js';
+
+const VideoSection: React.FC = () => {
+    return (
+        <Box padding="17px 28px">
+            <Flex alignItems="center" marginBottom="9px">
+                <Heading color="typography.900" variant="H3" marginRight="11px">
+                    Videos
+                </Heading>
+                <Badge
+                    color="background.600"
+                    bg="#D1D4DB"
+                    fontWeight="400"
+                    padding="2px 10px"
+                >
+                    23
+                </Badge>
+            </Flex>
+            <SimpleGrid minChildWidth="253px" spacing="20px">
+                {/* TODO: Update this mocked data */}
+                <VideoCard />
+                <VideoCard />
+                <VideoCard />
+                <VideoCard />
+                <VideoCard />
+            </SimpleGrid>
+        </Box>
+    );
+};
+
+export { VideoSection };

frontend/src/bundles/home/pages/home.tsx

@@ -0,0 +1,15 @@
+import { Box, Header } from '~/bundles/common/components/components.js';
+
+import { MainContent } from '../components/components.js';
+
+const Home: React.FC = () => {
+    return (
+        <Box bg="background.900" height="100vh">
+            <Header />
+            {/* Sidebar */}
+            <MainContent />
+        </Box>
+    );
+};
+
+export { Home };

frontend/src/router/routes/protected-routes.tsx

@@ -1,6 +1,7 @@
 import { Navigate } from 'react-router-dom';
 
 import { AppRoute } from '~/bundles/common/enums/app-route.enum.js';
+import { Home } from '~/bundles/home/pages/home.js';
 import { Studio } from '~/bundles/studio/pages/studio.js';
 
 import { ProtectedRoute } from '../components/protected-route.js';
@@ -10,6 +11,10 @@ const protectedRoutes = {
     element: <ProtectedRoute />,
     children: [
         //TODO Add protected routes here in element property and specify the correct path
+        {
+            path: AppRoute.ROOT,
+            element: <Home />,
+        },
         {
             path: AppRoute.STUDIO,
             element: <Studio />,