k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lifestyle development

Browse Source
This commit is contained in:
Danel Kungla
2025-10-21 16:04:01 +03:00
parent 6dcc91a206
commit 76c2382e11
14 changed files with 374 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/home/(user)/_components/ai/recommendations-skeleton.tsx
View File

@@ -11,7 +11,7 @@ import {
} from '@kit/ui/shadcn/card';
import { Skeleton } from '@kit/ui/skeleton';
const RecommendationsSkeleton = () => {
const RecommendationsSkeleton = ({ amount = 2 }: { amount?: number }) => {
const emptyData = [
{
title: '1',
@@ -20,55 +20,48 @@ const RecommendationsSkeleton = () => {
variant: { id: '' },
price: 1,
},
{
title: '2',
description: '',
subtitle: '',
variant: { id: '' },
price: 1,
},
];
return (
<div className="xs:grid-cols-3 mt-4 grid gap-6">
{emptyData.map(({ title, description, subtitle }) => (
<Skeleton key={title}>
<Card>
<CardHeader className="flex-row">
<div
className={
'mb-6 flex size-8 items-center-safe justify-center-safe'
}
/>
<div className="ml-auto flex size-8 items-center-safe justify-center-safe">
<Button size="icon" className="px-2" />
</div>
</CardHeader>
<CardFooter className="flex">
<div className="flex flex-1 flex-col items-start">
<h5>
{title}
{description && (
<>
{' '}
<InfoTooltip
content={
<div className="flex flex-col gap-2">
<span>{description}</span>
</div>
}
/>
</>
)}
</h5>
{subtitle && <CardDescription>{subtitle}</CardDescription>}
</div>
<div className="flex flex-col items-end gap-2 self-end text-sm"></div>
</CardFooter>
</Card>
</Skeleton>
))}
</div>
);
return Array.from({ length: amount }, (_, index) => {
const { title, description, subtitle } = emptyData[0]!;
return (
<Skeleton key={title + index}>
<Card>
<CardHeader className="flex-row">
<div
className={
'mb-6 flex size-8 items-center-safe justify-center-safe'
}
/>
<div className="ml-auto flex size-8 items-center-safe justify-center-safe">
<Button size="icon" className="px-2" />
</div>
</CardHeader>
<CardFooter className="flex">
<div className="flex flex-1 flex-col items-start">
<h5>
{title}
{description && (
<>
{' '}
<InfoTooltip
content={
<div className="flex flex-col gap-2">
<span>{description}</span>
</div>
}
/>
</>
)}
</h5>
{subtitle && <CardDescription>{subtitle}</CardDescription>}
</div>
<div className="flex flex-col items-end gap-2 self-end text-sm"></div>
</CardFooter>
</Card>
</Skeleton>
);
});
};
export default RecommendationsSkeleton;