50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Separator } from '@/components/ui/separator';
|
|
import { SharedData } from '@/types/global';
|
|
import { usePage } from '@inertiajs/react';
|
|
import { Check } from 'lucide-react';
|
|
|
|
const Details = ({ course }: { course: Course }) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { translate } = props;
|
|
const { frontend } = translate;
|
|
return (
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<div>
|
|
<h6 className="mb-4 text-xl font-semibold">{frontend.requirements}</h6>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="space-y-4">
|
|
{course.requirements?.map(({ id, requirement }) => (
|
|
<div key={id} className="flex gap-3">
|
|
<div className="bg-secondary-light mt-0.5 flex h-5 w-full max-w-5 items-center justify-center rounded-full">
|
|
<Check className="text-secondary-foreground h-4 w-4 shrink-0" />
|
|
</div>
|
|
<p className="text-muted-foreground">{requirement}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 className="mb-4 text-xl font-semibold">{frontend.outcomes}</h6>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="space-y-4">
|
|
{course.outcomes?.map(({ id, outcome }) => (
|
|
<div key={id} className="flex gap-3">
|
|
<div className="bg-secondary-light mt-0.5 flex h-5 w-full max-w-5 items-center justify-center rounded-full">
|
|
<Check className="text-secondary-foreground h-4 w-4 shrink-0" />
|
|
</div>
|
|
<p className="text-muted-foreground">{outcome}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Details;
|