Merge pull request #400 from BinaryStudioAcademy/task/OV-399-add-hori…

…zontal-scroll-to-the-recent-videos-section OV-399: Add horizontal scroll to recent videos
BinaryStudioAcademy · Sep 24, 2024 · c4390f9 · c4390f9
2 parents fdf29aa + 60e47b5
commit c4390f9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 9 deletions.
diff --git a/frontend/src/bundles/home/components/main-content/main-content.tsx b/frontend/src/bundles/home/components/main-content/main-content.tsx
@@ -3,19 +3,22 @@ import {
     Loader,
     Overlay,
 } from '~/bundles/common/components/components.js';
+import { useCollapse } from '~/bundles/common/components/sidebar/hooks/use-collapse.hook.js';
 import { DataStatus } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
     useAppSelector,
     useEffect,
 } from '~/bundles/common/hooks/hooks.js';
+import { VideoGallery } from '~/bundles/home/enums/video-gallery.js';
 import { actions as homeActions } from '~/bundles/home/store/home.js';
 
 import { VideoSection } from '../components.js';
 import styles from './styles.module.css';
 
 const MainContent: React.FC = () => {
     const dispatch = useAppDispatch();
+    const { isCollapsed } = useCollapse();
 
     const { videos, dataStatus } = useAppSelector(({ home }) => home);
 
@@ -26,13 +29,16 @@ const MainContent: React.FC = () => {
     }, [dispatch]);
 
     return (
-        <Box className={styles['main-content']}>
+        <Box
+            className={styles['main-content']}
+            w={isCollapsed ? 'calc(100vw - 60px)' : 'calc(100vw - 270px)'}
+        >
             <Overlay isOpen={dataStatus === DataStatus.PENDING}>
                 <Loader />
             </Overlay>
 
-            <VideoSection videos={videos} title="Recent videos" />
-            <VideoSection videos={videos} title="Videos" />
+            <VideoSection videos={videos} title={VideoGallery.RECENT_VIDEOS} />
+            <VideoSection videos={videos} title={VideoGallery.VIDEOS} />
         </Box>
     );
 };

diff --git a/frontend/src/bundles/home/components/video-section/styles.module.css b/frontend/src/bundles/home/components/video-section/styles.module.css
@@ -0,0 +1,6 @@
+.horizontal {
+    display: flex;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #c1c1c1 #f1f1f1;
+}
diff --git a/frontend/src/bundles/home/components/video-section/video-section.tsx b/frontend/src/bundles/home/components/video-section/video-section.tsx
@@ -8,7 +8,9 @@ import {
 } from '~/bundles/common/components/components.js';
 import { type VideoGetAllItemResponseDto } from '~/bundles/home/types/types.js';
 
+import { VideoGallery } from '../../enums/video-gallery.js';
 import { VideoCard } from '../components.js';
+import styles from './styles.module.css';
 
 type Properties = {
     videos: Array<VideoGetAllItemResponseDto> | [];
@@ -33,11 +35,29 @@ const VideoSection: React.FC<Properties> = ({ videos, title }) => {
             </Flex>
 
             {videos.length > 0 ? (
-                <SimpleGrid columns={{ sm: 2, md: 3, lg: 4 }} spacing="20px">
-                    {videos.map(({ id, ...video }) => (
-                        <VideoCard key={id} id={id} {...video} />
-                    ))}
-                </SimpleGrid>
+                title === VideoGallery.RECENT_VIDEOS ? (
+                    <Box className={styles['horizontal']}>
+                        {videos.map(({ id, ...video }) => (
+                            <Box
+                                key={id}
+                                flex="0 0 auto"
+                                marginRight="20px"
+                                width="250px"
+                            >
+                                <VideoCard id={id} {...video} />
+                            </Box>
+                        ))}
+                    </Box>
+                ) : (
+                    <SimpleGrid
+                        columns={{ sm: 2, md: 3, lg: 4 }}
+                        spacing="20px"
+                    >
+                        {videos.map(({ id, ...video }) => (
+                            <VideoCard key={id} id={id} {...video} />
+                        ))}
+                    </SimpleGrid>
+                )
             ) : (
                 <Text color="typography.600" variant="body1">
                     You have no videos right now.

diff --git a/frontend/src/bundles/home/enums/video-gallery.ts b/frontend/src/bundles/home/enums/video-gallery.ts
@@ -0,0 +1,6 @@
+const VideoGallery = {
+    VIDEOS: 'Videos',
+    RECENT_VIDEOS: 'Recent videos',
+} as const;
+
+export { VideoGallery };
diff --git a/frontend/src/bundles/home/pages/home.tsx b/frontend/src/bundles/home/pages/home.tsx
@@ -8,7 +8,7 @@ import { MainContent } from '../components/components.js';
 
 const Home: React.FC = () => {
     return (
-        <Box bg="background.900" minHeight="100vh" overflow="auto">
+        <Box bg="background.900" minHeight="100vh">
             <Header />
             <Sidebar>
                 <MainContent />