lms/resources/js/pages/student/tabs-content/wishlist.tsx
2025-12-15 12:26:23 +01:00

49 lines
1.7 KiB
TypeScript

import DefaultCard from '@/components/cards/course-card-1';
import ExamCard from '@/components/exam/exam-card-1';
import { Card } from '@/components/ui/card';
import { StudentDashboardProps } from '@/types/page';
import { usePage } from '@inertiajs/react';
const Wishlist = () => {
const { courseWishlists, examWishlists, translate } = usePage<StudentDashboardProps>().props;
const { frontend } = translate;
return (
<div className="space-y-6">
<div>
<h2 className="mb-2 text-xl font-semibold">Course Wishlist</h2>
{courseWishlists && courseWishlists.length > 0 ? (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
{courseWishlists.map(({ id, course }) => (
<DefaultCard key={id} course={course} wishlists={courseWishlists} />
))}
</div>
) : (
<Card className="flex items-center justify-center p-6">
<p>{frontend.no_wishlist_items}</p>
</Card>
)}
</div>
<div>
<h2 className="mb-2 text-xl font-semibold">Exam Wishlist</h2>
{examWishlists && examWishlists.length > 0 ? (
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
{examWishlists.map(({ id, exam }) => (
<ExamCard key={id} exam={exam} viewType="grid" />
))}
</div>
) : (
<Card className="flex items-center justify-center p-6">
<p>{frontend.no_wishlist_items}</p>
</Card>
)}
</div>
</div>
);
};
export default Wishlist;