78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight, HeartPulse } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardDescription,
|
|
CardProps,
|
|
CardFooter,
|
|
} from '@kit/ui/card';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const dummyCards = [
|
|
{
|
|
title: 'booking:analysisPackages.title',
|
|
description: 'booking:analysisPackages.description',
|
|
descriptionColor: 'text-primary',
|
|
icon: (
|
|
<Link href={'/home/order-analysis-package'}>
|
|
<Button size="icon" variant="outline" className="px-2 text-black">
|
|
<ChevronRight className="size-4 stroke-2" />
|
|
</Button>
|
|
</Link>
|
|
),
|
|
cardVariant: 'gradient-success' as CardProps['variant'],
|
|
iconBg: 'bg-warning',
|
|
},
|
|
];
|
|
|
|
export default function OrderCards() {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-6 mt-4">
|
|
{dummyCards.map(({
|
|
title,
|
|
description,
|
|
icon,
|
|
cardVariant,
|
|
descriptionColor,
|
|
iconBg,
|
|
}) => (
|
|
<Card
|
|
key={title}
|
|
variant={cardVariant}
|
|
className="flex flex-col justify-between"
|
|
>
|
|
<CardHeader className="items-end-safe">
|
|
<div
|
|
className={cn(
|
|
'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
|
|
iconBg,
|
|
)}
|
|
>
|
|
{icon}
|
|
</div>
|
|
</CardHeader>
|
|
<CardFooter className="flex flex-col items-start gap-2">
|
|
<div
|
|
className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
|
|
>
|
|
<HeartPulse className="size-4 fill-green-500" />
|
|
</div>
|
|
<h5>
|
|
<Trans i18nKey={title} />
|
|
</h5>
|
|
<CardDescription className={descriptionColor}>
|
|
<Trans i18nKey={description} />
|
|
</CardDescription>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|