From a58690c0eaf649287d36bad07901bc298ee0f553 Mon Sep 17 00:00:00 2001
From: Jatin Lodhi <90623311+Jatin123lodhi@users.noreply.github.com>
Date: Wed, 9 Oct 2024 02:40:17 +0530
Subject: [PATCH] show content titles on hover of weekly cards (#1429)

---
 src/components/ContentCard.tsx | 134 ++++++++++++++++++---------------
 src/components/FolderView.tsx  |   5 +-
 src/lib/utils.ts               |   2 +
 3 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
index 87345a185..8c8a76c4b 100644
--- a/src/components/ContentCard.tsx
+++ b/src/components/ContentCard.tsx
@@ -5,6 +5,7 @@ import { formatTime } from '@/lib/utils';
 import VideoThumbnail from './videothumbnail';
 import CardComponent from './CardComponent';
 import { motion } from 'framer-motion';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 
 export const ContentCard = ({
   title,
@@ -15,6 +16,7 @@ export const ContentCard = ({
   bookmark,
   contentId,
   contentDuration,
+  weeklyContentTitles,
 }: {
   type: 'folder' | 'video' | 'notion';
   contentId?: number;
@@ -27,68 +29,80 @@ export const ContentCard = ({
   bookmark?: Bookmark | null;
   contentDuration?: number;
   uploadDate?: string;
+  weeklyContentTitles?: string[];
 }) => {
   return (
-    <motion.div
-      onClick={onClick}
-      tabIndex={0}
-      role="button"
-      onKeyDown={(e:React.KeyboardEvent) => (['Enter', ' '].includes(e.key) && onClick())}
-      className={`group relative flex h-fit w-full max-w-md cursor-pointer flex-col gap-2 rounded-2xl transition-all duration-300 hover:-translate-y-2`}
-    >
-      {markAsCompleted && (
-        <div className="absolute right-2 top-2 z-10">
-          <CheckCircle2 color="green" size={30} fill="lightgreen" />
-        </div>
-      )}
-      {type === 'video' && (
-        <div className="absolute bottom-12 right-2 z-10 rounded-md p-2 font-semibold text-white">
-          <Play className="size-6" />
-        </div>
-      )}
-      {type !== 'video' && (
-        <div className="relative overflow-hidden rounded-md">
-          <CardComponent
-            title={title}
-            contentDuration={contentDuration && formatTime(contentDuration)}
-            type={type}
-          />
-          {!!videoProgressPercent && (
-            <div className="absolute bottom-0 h-1 w-full bg-[#707071]">
-              <div
-                className="h-full bg-[#FF0101]"
-                style={{ width: `${videoProgressPercent}%` }}
-              />
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <motion.div
+            onClick={onClick}
+            tabIndex={0}
+            role="button"
+            onKeyDown={(e: React.KeyboardEvent) => (['Enter', ' '].includes(e.key) && onClick())}
+            className={`group relative flex h-fit w-full max-w-md cursor-pointer flex-col gap-2 rounded-2xl transition-all duration-300 hover:-translate-y-2`}
+          >
+            {markAsCompleted && (
+              <div className="absolute right-2 top-2 z-10">
+                <CheckCircle2 color="green" size={30} fill="lightgreen" />
+              </div>
+            )}
+            {type === 'video' && (
+              <div className="absolute bottom-12 right-2 z-10 rounded-md p-2 font-semibold text-white">
+                <Play className="size-6" />
+              </div>
+            )}
+            {type !== 'video' && (
+              <div className="relative overflow-hidden rounded-md">
+                <CardComponent
+                  title={title}
+                  contentDuration={contentDuration && formatTime(contentDuration)}
+                  type={type}
+                />
+                {!!videoProgressPercent && (
+                  <div className="absolute bottom-0 h-1 w-full bg-[#707071]">
+                    <div
+                      className="h-full bg-[#FF0101]"
+                      style={{ width: `${videoProgressPercent}%` }}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+            {type === 'video' && (
+              <div className="relative overflow-hidden">
+                <VideoThumbnail
+                  title={title}
+                  contentId={contentId ?? 0}
+                  imageUrl=""
+                // imageUrl={
+                //   'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
+                // }
+                />
+              </div>
+            )}
+            <div className="flex items-center justify-between gap-4">
+              <h3 className="w-full truncate text-xl font-bold capitalize tracking-tighter md:text-2xl">
+                {title}
+              </h3>
+              {bookmark !== undefined && contentId && (
+                <BookmarkButton
+                  bookmark={bookmark}
+                  contentId={contentId}
+                  size={24}
+                  align="end"
+                  side="top"
+                />
+              )}
             </div>
-          )}
-        </div>
-      )}
-      {type === 'video' && (
-        <div className="relative overflow-hidden">
-          <VideoThumbnail
-            title={title}
-            contentId={contentId ?? 0}
-            imageUrl=""
-            // imageUrl={
-            //   'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
-            // }
-          />
-        </div>
-      )}
-      <div className="flex items-center justify-between gap-4">
-        <h3 className="w-full truncate text-xl font-bold capitalize tracking-tighter md:text-2xl">
-          {title}
-        </h3>
-        {bookmark !== undefined && contentId && (
-          <BookmarkButton
-            bookmark={bookmark}
-            contentId={contentId}
-            size={24}
-            align="end"
-            side="top"
-          />
-        )}
-      </div>
-    </motion.div>
+          </motion.div>
+        </TooltipTrigger>
+        {
+          Array.isArray(weeklyContentTitles) && weeklyContentTitles?.length > 0 && <TooltipContent sideOffset={16}>
+            {weeklyContentTitles?.map((title) => <p>{title}</p>)}
+          </TooltipContent>
+        }
+      </Tooltip>
+    </TooltipProvider>
   );
 };
diff --git a/src/components/FolderView.tsx b/src/components/FolderView.tsx
index e79887df3..c9f24c430 100644
--- a/src/components/FolderView.tsx
+++ b/src/components/FolderView.tsx
@@ -2,6 +2,7 @@
 import { useRouter } from 'next/navigation';
 import { ContentCard } from './ContentCard';
 import { Bookmark } from '@prisma/client';
+import { CourseContentType } from '@/lib/utils';
 
 export const FolderView = ({
   courseContent,
@@ -11,7 +12,7 @@ export const FolderView = ({
   courseId: number;
   rest: string[];
   courseContent: {
-    type: 'folder' | 'video' | 'notion';
+    type: CourseContentType;
     title: string;
     image: string;
     id: number;
@@ -20,6 +21,7 @@ export const FolderView = ({
     videoFullDuration?: number;
     duration?: number;
     bookmark: Bookmark | null;
+    weeklyContentTitles?: string[];
   }[];
 }) => {
   const router = useRouter();
@@ -62,6 +64,7 @@ export const FolderView = ({
               videoProgressPercent={videoProgressPercent}
               bookmark={content.bookmark}
               contentDuration={content.videoFullDuration}
+              weeklyContentTitles={content.weeklyContentTitles}
             />
           );
         })}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6c5b1e2c7..20036a9f7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -366,3 +366,5 @@ export const getDisabledFeature = (feature: string): boolean => {
     .split(',')
     .includes(feature);
 };
+
+export type CourseContentType = 'folder' | 'video' | 'notion'
\ No newline at end of file