Skip to content

Commit

Permalink
show content titles on hover of weekly cards (#1429)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jatin123lodhi
Jatin123lodhi authored Oct 8, 2024
1 parent e0b174f commit a58690c
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 61 deletions.
134 changes: 74 additions & 60 deletions src/components/ContentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -15,6 +16,7 @@ export const ContentCard = ({
bookmark,
contentId,
contentDuration,
weeklyContentTitles,
}: {
type: 'folder' | 'video' | 'notion';
contentId?: number;
Expand All @@ -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>
);
};
5 changes: 4 additions & 1 deletion src/components/FolderView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -11,7 +12,7 @@ export const FolderView = ({
courseId: number;
rest: string[];
courseContent: {
type: 'folder' | 'video' | 'notion';
type: CourseContentType;
title: string;
image: string;
id: number;
Expand All @@ -20,6 +21,7 @@ export const FolderView = ({
videoFullDuration?: number;
duration?: number;
bookmark: Bookmark | null;
weeklyContentTitles?: string[];
}[];
}) => {
const router = useRouter();
Expand Down Expand Up @@ -62,6 +64,7 @@ export const FolderView = ({
videoProgressPercent={videoProgressPercent}
bookmark={content.bookmark}
contentDuration={content.videoFullDuration}
weeklyContentTitles={content.weeklyContentTitles}
/>
);
})}
Expand Down
2 changes: 2 additions & 0 deletions src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,3 +366,5 @@ export const getDisabledFeature = (feature: string): boolean => {
.split(',')
.includes(feature);
};

export type CourseContentType = 'folder' | 'video' | 'notion'

0 comments on commit a58690c

Please sign in to comment.