peer-at-code-web/ui/Card.tsx
2023-03-18 19:55:28 +01:00

34 lines
1 KiB
TypeScript

import Icon from './Icon';
export default function Card({
isLoading,
icon,
title,
data
}: {
isLoading: boolean;
icon: string;
title: string;
data: any;
}) {
if (isLoading)
return (
<div className="flex w-full items-center space-x-4 rounded-lg border-2 border-highlight-primary bg-primary-700 p-4 shadow-md">
<Icon name={icon} className="text-2xl text-muted" />
<div className="flex flex-col space-y-4">
<span className="h-4 w-32 animate-pulse rounded bg-highlight-primary" />
<span className="h-4 w-24 animate-pulse rounded bg-highlight-primary" />
</div>
</div>
);
return (
<div className="flex w-full items-center space-x-4 rounded-lg border-2 border-highlight-primary bg-primary-700 p-4 shadow-md">
<Icon name={icon} className="text-2xl text-muted" />
<div className="flex flex-col">
<h3 className="text-xl font-semibold">{data}</h3>
<p className="text-muted">{title}</p>
</div>
</div>
);
}