Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 4x 41x 4x 5x 10x | import { ActionMenuWrapper } from '@/components/action-menu';
import { Card, CardTitle } from '@/components/card';
export const DashboardCardWrapper = ({
title,
children,
actionItems,
className = '',
contentClassName = '',
showActions = true,
}) => {
return (
<Card
className={`${className} ${!title && 'relative'} flex flex-col bg-card rounded-lg border border-border shadow-sm`}
>
<div
className={`${!title && 'absolute top-1 right-1'} flex items-center justify-between p-6`}
>
{title && <CardTitle>{title}</CardTitle>}
{showActions && actionItems && actionItems.length > 0 && (
<div className="ml-auto">
<ActionMenuWrapper items={actionItems} />
</div>
)}
</div>
{/* Content area */}
<div
className={`p-6 flex items-center justify-center ${contentClassName}`}
>
{children}
</div>
</Card>
);
};
export const SummaryLoadingSkeleton = ({ count = 3 }) => {
return (
<>
{Array.from({ length: count }).map((_, index) => (
<div
key={index}
className="bg-card rounded-lg border border-border shadow-sm p-6"
>
<div className="animate-pulse">
<div className="h-4 bg-muted rounded w-3/4 mb-4"></div>
<div className="h-8 bg-muted rounded w-1/2 mb-2"></div>
<div className="h-3 bg-muted rounded w-1/3"></div>
</div>
</div>
))}
</>
);
};
|