72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { pathsConfig } from '@/packages/shared/src/config';
|
|
import { ComponentInstanceIcon } from '@radix-ui/react-icons';
|
|
import { ChevronRight, HeartPulse } from 'lucide-react';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Card,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardProps,
|
|
} from '@kit/ui/card';
|
|
|
|
import { ServiceCategory } from './service-categories';
|
|
|
|
export default function OrderCards({
|
|
heroCategories,
|
|
}: {
|
|
heroCategories: ServiceCategory[];
|
|
}) {
|
|
return (
|
|
<div className="xs:grid-cols-3 mt-4 grid grid-cols-1 gap-2">
|
|
{heroCategories.map(({ name, description, color, handle }) => (
|
|
<Card
|
|
key={name}
|
|
variant={`gradient-${color}` as CardProps['variant']}
|
|
className="flex flex-col justify-between"
|
|
>
|
|
<CardHeader className="relative flex flex-row justify-between">
|
|
<div
|
|
className={cn(
|
|
'flex size-8 items-center-safe justify-center-safe rounded-full',
|
|
`text-${color}`,
|
|
`bg-${color}/10`,
|
|
{
|
|
'bg-primary/10': color === 'success',
|
|
},
|
|
)}
|
|
>
|
|
<ComponentInstanceIcon
|
|
className={cn('size-4', `fill-${color}`)}
|
|
/>
|
|
</div>
|
|
<div className="absolute top-2 right-2 flex size-8 items-center-safe justify-center-safe rounded-xl text-white">
|
|
<Link
|
|
href={pathsConfig.app.bookingHandle.replace('[handle]', handle)}
|
|
>
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
className="px-2 text-black"
|
|
>
|
|
<ChevronRight className="size-4 stroke-2" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardHeader>
|
|
<CardFooter className="mt-5 flex flex-col items-start gap-2">
|
|
<h5>{name}</h5>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|