hide dashboard recommendations block
This commit is contained in:
128
app/home/(user)/_components/dashboard-recommendations.tsx
Normal file
128
app/home/(user)/_components/dashboard-recommendations.tsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -9,20 +9,17 @@ import {
|
|||||||
Activity,
|
Activity,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
Clock9,
|
Clock9,
|
||||||
Droplets,
|
|
||||||
Pill,
|
Pill,
|
||||||
Scale,
|
Scale,
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
User,
|
User,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import { InfoTooltip } from '@kit/shared/components/ui/info-tooltip';
|
|
||||||
import { pathsConfig } from '@kit/shared/config';
|
import { pathsConfig } from '@kit/shared/config';
|
||||||
import { getPersonParameters } from '@kit/shared/utils';
|
import { getPersonParameters } from '@kit/shared/utils';
|
||||||
import { Button } from '@kit/ui/button';
|
import { Button } from '@kit/ui/button';
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
CardDescription,
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@@ -38,6 +35,7 @@ import {
|
|||||||
getBmiBackgroundColor,
|
getBmiBackgroundColor,
|
||||||
getBmiStatus,
|
getBmiStatus,
|
||||||
} from '~/lib/utils';
|
} from '~/lib/utils';
|
||||||
|
import DashboardRecommendations from './dashboard-recommendations';
|
||||||
|
|
||||||
const getCardVariant = (isSuccess: boolean | null): CardProps['variant'] => {
|
const getCardVariant = (isSuccess: boolean | null): CardProps['variant'] => {
|
||||||
if (isSuccess === null) return 'default';
|
if (isSuccess === null) return 'default';
|
||||||
@@ -135,37 +133,7 @@ const cards = ({
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const dummyRecommendations = [
|
const IS_SHOWN_RECOMMENDATIONS = false as boolean;
|
||||||
{
|
|
||||||
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 Dashboard({
|
export default function Dashboard({
|
||||||
account,
|
account,
|
||||||
@@ -232,79 +200,7 @@ export default function Dashboard({
|
|||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Card>
|
{IS_SHOWN_RECOMMENDATIONS && <DashboardRecommendations />}
|
||||||
<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>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user