62 lines
2.7 KiB
TypeScript
62 lines
2.7 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { systemCurrency } from '@/lib/utils';
|
|
import { SharedData } from '@/types/global';
|
|
import { useForm, usePage } from '@inertiajs/react';
|
|
import { Trash } from 'lucide-react';
|
|
|
|
const CourseCard = ({ course }: { course: Course }) => {
|
|
const { system } = usePage<SharedData>().props;
|
|
const { delete: destroy, processing } = useForm();
|
|
const currency = systemCurrency(system.fields['selling_currency']);
|
|
|
|
return (
|
|
<Card className="overflow-hidden">
|
|
<CardContent className="p-0">
|
|
<div className="flex flex-col md:flex-row">
|
|
<div className="bg-muted h-48 w-full overflow-hidden md:w-60">
|
|
<img alt={course.title} className="h-full w-full object-cover" src={course.thumbnail ?? '/assets/images/blank-image.jpg'} />
|
|
</div>
|
|
<div className="flex flex-1 flex-col justify-between p-5">
|
|
<div>
|
|
<h3 className="mb-2 text-xl font-semibold">{course.title}</h3>
|
|
<p className="text-muted-foreground mb-4 line-clamp-2">{course.short_description}</p>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<p className="capitalize">
|
|
{course.pricing_type === 'free' ? (
|
|
course.pricing_type
|
|
) : course.discount ? (
|
|
<>
|
|
<span className="text-xl font-bold">
|
|
{currency?.symbol}
|
|
{course.discount_price}
|
|
</span>
|
|
<span className="text-muted-foreground ml-2 text-sm line-through">
|
|
{currency?.symbol}
|
|
{course.price}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-xl font-bold">
|
|
{currency?.symbol}
|
|
{course.price}
|
|
</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
|
|
<Button size="icon" variant="ghost" onClick={() => destroy(route('course-cart.destroy', course.id))} disabled={processing}>
|
|
<Trash className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default CourseCard;
|