123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
import { BlendingModeIcon } from '@radix-ui/react-icons';
|
|
import { Droplets } from 'lucide-react';
|
|
|
|
import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
|
|
import { Button } from '@kit/ui/button';
|
|
import { Card, CardContent, CardHeader } from '@kit/ui/card';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { cn } from '@kit/ui/utils';
|
|
|
|
const dummyRecommendations = [
|
|
{
|
|
icon: <BlendingModeIcon className="size-4" />,
|
|
color: 'bg-cyan/10 text-cyan',
|
|
title: 'Kolesterooli kontroll',
|
|
description: 'HDL-kolestrool',
|
|
tooltipContent: 'Selgitus',
|
|
price: '20,00 €',
|
|
buttonText: 'Telli',
|
|
href: '/home/booking',
|
|
},
|
|
{
|
|
icon: <BlendingModeIcon className="size-4" />,
|
|
color: 'bg-primary/10 text-primary',
|
|
title: 'Kolesterooli kontroll',
|
|
tooltipContent: 'Selgitus',
|
|
description: 'LDL-Kolesterool',
|
|
buttonText: 'Broneeri',
|
|
href: '/home/booking',
|
|
},
|
|
{
|
|
icon: <Droplets />,
|
|
color: 'bg-destructive/10 text-destructive',
|
|
title: 'Vererõhu kontroll',
|
|
tooltipContent: 'Selgitus',
|
|
description: 'Score-Risk 2',
|
|
price: '20,00 €',
|
|
buttonText: 'Telli',
|
|
href: '/home/booking',
|
|
},
|
|
];
|
|
|
|
export default function DashboardRecommendations() {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="items-start">
|
|
<h4>
|
|
<Trans i18nKey="dashboard:recommendedForYou" />
|
|
</h4>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{dummyRecommendations.map(
|
|
(
|
|
{
|
|
icon,
|
|
color,
|
|
title,
|
|
description,
|
|
tooltipContent,
|
|
price,
|
|
buttonText,
|
|
href,
|
|
},
|
|
index,
|
|
) => {
|
|
return (
|
|
<div
|
|
className="flex w-full justify-between gap-3 overflow-scroll"
|
|
key={index}
|
|
>
|
|
<div className="mr-4 flex min-w-fit flex-row items-center gap-4">
|
|
<div
|
|
className={cn(
|
|
'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
|
|
color,
|
|
)}
|
|
>
|
|
{icon}
|
|
</div>
|
|
<div className="min-w-fit">
|
|
<div className="inline-flex items-center gap-1 align-baseline text-sm font-medium">
|
|
{title}
|
|
<InfoTooltip content={tooltipContent} />
|
|
</div>
|
|
<p className="text-muted-foreground text-sm">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid w-36 min-w-fit auto-rows-fr grid-cols-2 items-center gap-4">
|
|
<p className="text-sm font-medium"> {price}</p>
|
|
{href ? (
|
|
<Link href={href}>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
className="w-full min-w-fit"
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
className="w-full min-w-fit"
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|