Feat : Added layout Toggle and closes #338

code100x · Apr 8, 2024 · 0a761f0 · 0a761f0
1 parent 612fa7f
commit 0a761f0
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 150 deletions.
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -7,6 +7,7 @@ export const ContentCard = ({
   title,
   onClick,
   markAsCompleted,
+  layoutType,
   percentComplete,
   type,
   videoProgressPercent,
@@ -17,6 +18,7 @@ export const ContentCard = ({
   type: 'folder' | 'video' | 'notion';
   contentId?: number;
   image: string;
+  layoutType: number;
   title: string;
   onClick: () => void;
   markAsCompleted?: boolean;
@@ -35,7 +37,7 @@ export const ContentCard = ({
   return (
     <div
       onClick={onClick}
-      className={`relative ease-in duration-200 cursor-pointer group${hoverExpand ? ' hover:scale-105' : ''} `}
+      className={`relative ${layoutType === 2 ? 'border-2 hover:bg-[#101522c5] p-2 rounded-md flex items-center justify-start gap-2' : ''}  ease-in duration-200 cursor-pointer group${hoverExpand ? ' hover:scale-[1.02]' : ''} `}
     >
       {percentComplete !== null && percentComplete !== undefined && (
         <PercentageComplete percent={percentComplete} />
@@ -45,8 +47,12 @@ export const ContentCard = ({
           <CheckCircle2 color="green" size={20} />
         </div>
       )}
-      <div className="relative overflow-hidden rounded-md">
-        <img src={image} alt={title} className="" />
+      <div
+        className={`relative ${layoutType === 2 ? 'w-[40%] md:w-[20%]' : ''}  overflow-hidden rounded-md`}
+      >
+        <div className="w-full h-full">
+          <img src={image} alt={title} className="w-full h-full" />
+        </div>
         {!!videoProgressPercent && (
           <div className="absolute bottom-0 w-full h-1 bg-[#707071]">
             <div
@@ -67,7 +73,9 @@ export const ContentCard = ({
           />
         </div>
       )}
-      <div className="flex justify-between mt-2 text-gray-900 dark:text-white">
+      <div
+        className={`flex ${layoutType === 2 ? 'w-full' : 'mt-2'}  justify-between  text-gray-900 dark:text-white`}
+      >
         <div>{title}</div>
       </div>
     </div>

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
@@ -21,12 +21,12 @@ export const CourseCard = ({
       <div className="relative">
         {course.totalVideos !== undefined &&
           course.totalVideosWatched !== undefined && (
-          <PercentageComplete
-            percent={Math.ceil(
-              (course.totalVideosWatched / course.totalVideos) * 100,
-            )}
-          />
-        )}
+            <PercentageComplete
+              percent={Math.ceil(
+                (course.totalVideosWatched / course.totalVideos) * 100,
+              )}
+            />
+          )}
       </div>
       <img src={course.imageUrl} alt={course.title} className="rounded-md" />
       <div className="p-2">

diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
@@ -7,6 +7,7 @@ import { getFolderPercentCompleted } from '@/lib/utils';
 import Comments from './comment/Comments';
 import { QueryParams } from '@/actions/types';
 import BreadCrumbComponent from './BreadCrumbComponent';
+import LayoutToggle from './LayoutToggle';
 
 export const CourseView = ({
   rest,
@@ -31,14 +32,16 @@ export const CourseView = ({
     <div className="flex h-full">
       <Sidebar fullCourseContent={fullCourseContent} courseId={course.id} />
       <div className="grow p-2 overflow-y-auto no-scrollbar">
-        <div className=" min-h-[2.5rem] max-h-fit mb-2 flex items-center px-4">
+        <div className=" min-h-[2.5rem] max-h-fit mb-2 flex justify-between items-center px-4">
           <BreadCrumbComponent
             course={course}
             contentType={contentType}
             courseContent={courseContent}
             fullCourseContent={fullCourseContent}
             rest={rest}
           />
+
+          {contentType === 'folder' ? <LayoutToggle /> : null}
         </div>
 
         {contentType === 'notion' ? (

diff --git a/src/components/FolderView.tsx b/src/components/FolderView.tsx
@@ -2,6 +2,8 @@
 import { useRouter } from 'next/navigation';
 import { ContentCard } from './ContentCard';
 import { Bookmark } from '@prisma/client';
+import { useRecoilValue } from 'recoil';
+import { layoutToggle } from '@/store/atoms/layout';
 
 export const FolderView = ({
   courseContent,
@@ -23,6 +25,7 @@ export const FolderView = ({
   }[];
 }) => {
   const router = useRouter();
+  const layoutType = useRecoilValue(layoutToggle);
 
   if (!courseContent?.length) {
     return (
@@ -40,7 +43,9 @@ export const FolderView = ({
   return (
     <div>
       <div></div>
-      <div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
+      <div
+        className={`max-w-screen-xl  justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 ${layoutType === 1 ? 'md:grid-cols-3' : 'md:grid-cols-1'} `}
+      >
         {courseContent.map((content) => {
           const videoProgressPercent =
             content.type === 'video' &&
@@ -51,6 +56,7 @@ export const FolderView = ({
           return (
             <ContentCard
               type={content.type}
+              layoutType={layoutType}
               key={content.id}
               title={content.title}
               image={content.image || ''}

diff --git a/src/components/LayoutToggle.tsx b/src/components/LayoutToggle.tsx
@@ -0,0 +1,42 @@
+'use client';
+import React, { useEffect } from 'react';
+import { Grid3X3, Rows3 } from 'lucide-react';
+import { useRecoilState } from 'recoil';
+import { layoutToggle } from '@/store/atoms/layout';
+
+const LayoutToggle = () => {
+  const [layoutType, setLayoutType] = useRecoilState(layoutToggle);
+
+  useEffect(() => {
+    const storedLayout = localStorage.getItem('layout');
+    if (storedLayout !== null) {
+      setLayoutType(parseInt(storedLayout, 10));
+    }
+  }, []);
+
+  const handleLayoutChange = (type: number) => {
+    setLayoutType(type);
+    localStorage.setItem('layout', type.toString());
+  };
+
+  return (
+    <>
+      <div className="flex border w-[6rem] h-[2rem] justify-center rounded-full items-center">
+        <div
+          onClick={() => handleLayoutChange(1)}
+          className={`${layoutType === 1 ? 'bg-blue-500 rounded-sm text-black' : ''} w-[50%] flex cursor-pointer items-center justify-center h-full rounded-l-full`}
+        >
+          <Grid3X3 size={18} className={` `} />
+        </div>
+        <div
+          onClick={() => handleLayoutChange(2)}
+          className={`${layoutType === 2 ? 'bg-blue-500 rounded-sm text-black' : ''} w-[50%] flex cursor-pointer items-center justify-center h-full rounded-r-full`}
+        >
+          <Rows3 size={18} className={``} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LayoutToggle;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -157,16 +157,16 @@ export function ToggleButton({
       <span
         className={`dark:bg-white bg-black block transition-all duration-300 ease-out 
                     h-0.5 w-6 rounded-sm my-0.5 ${
-    !sidebarOpen ? 'opacity-0' : 'opacity-100'
-    }`}
+                      !sidebarOpen ? 'opacity-0' : 'opacity-100'
+                    }`}
       ></span>
       <span
         className={`dark:bg-white bg-black block transition-all duration-300 ease-out 
                     h-0.5 w-6 rounded-sm ${
-    !sidebarOpen
-      ? '-rotate-45 -translate-y-1'
-      : 'translate-y-0.5'
-    }`}
+                      !sidebarOpen
+                        ? '-rotate-45 -translate-y-1'
+                        : 'translate-y-0.5'
+                    }`}
       ></span>
     </button>
   );

diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
@@ -22,23 +22,23 @@ export const VideoPlayer = ({
     }
     const handleKeyPress = (event: any) => {
       switch (event.code) {
-      case 'Space': // Space bar for play/pause
-        if (player.paused()) {
-          player.play();
+        case 'Space': // Space bar for play/pause
+          if (player.paused()) {
+            player.play();
+            event.stopPropagation();
+          } else {
+            player.pause();
+            event.stopPropagation();
+          }
+          break;
+        case 'ArrowRight': // Right arrow for seeking forward 5 seconds
+          player.currentTime(player.currentTime() + 5);
           event.stopPropagation();
-        } else {
-          player.pause();
+          break;
+        case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
+          player.currentTime(player.currentTime() - 5);
           event.stopPropagation();
-        }
-        break;
-      case 'ArrowRight': // Right arrow for seeking forward 5 seconds
-        player.currentTime(player.currentTime() + 5);
-        event.stopPropagation();
-        break;
-      case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
-        player.currentTime(player.currentTime() - 5);
-        event.stopPropagation();
-        break;
+          break;
       }
     };