You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.3 KiB
73 lines
2.3 KiB
6 months ago
|
import { BookOpen, Clock, Heart } from "lucide-react"
|
||
|
|
import { Card, CardContent } from "../ui/card"
|
||
|
|
|
||
|
|
|
||
|
|
interface CourseInterface {
|
||
|
|
id : string ,
|
||
|
|
image :string | null
|
||
|
|
title : string
|
||
|
|
category : string
|
||
|
|
lessons : string
|
||
|
|
duration : string
|
||
|
|
instructor : {
|
||
|
|
image : string
|
||
|
|
name : string
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const CourseCard : React.FC<CourseInterface> = ({
|
||
|
|
id,
|
||
|
|
image,
|
||
|
|
title,
|
||
|
|
category,
|
||
|
|
lessons ,
|
||
|
|
instructor,
|
||
|
|
duration
|
||
|
|
}) => {
|
||
|
|
return(
|
||
|
|
<Card key={id} className="overflow-hidden">
|
||
|
|
<div className="relative">
|
||
|
|
|
||
|
|
<img
|
||
|
|
src={image!}
|
||
|
|
alt={title}
|
||
|
|
className="w-full h-48 object-cover"
|
||
|
|
/>
|
||
|
|
<span className="absolute top-4 left-4 bg-purple-700/90 text-white px-3 py-1 rounded-full text-sm">
|
||
|
|
{category}
|
||
|
|
</span>
|
||
|
|
<button className="absolute top-4 right-4 p-2 bg-white/90 rounded-full hover:bg-white">
|
||
|
|
<Heart className="w-4 h-4 fill-red-500 text-red-500" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<CardContent className="p-6">
|
||
|
|
<div className="flex gap-4 text-sm text-gray-600 mb-3">
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<BookOpen className="w-4 h-4" />
|
||
|
|
<span>{lessons} Lesson</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Clock className="w-4 h-4" />
|
||
|
|
<span>{duration}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-lg font-semibold mb-4">{title}</h3>
|
||
|
|
<div className="flex justify-between items-center">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<img
|
||
|
|
src={instructor?.image}
|
||
|
|
alt={instructor?.name}
|
||
|
|
className="w-8 h-8 rounded-full"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">{instructor?.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-purple-700 font-semibold text-sm px-4 py-1 bg-purple-200 rounded-2xl">Free</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CourseCard
|