peer-at-code-web/ui/Card.tsx
2023-09-04 13:39:18 +02:00

49 lines
1.4 KiB
TypeScript

import { getURL } from '@/lib/utils';
import AppLink from './AppLink';
import Icon from './Icon';
export default function Card({
isLoading,
icon,
title,
data,
link
}: {
isLoading: boolean;
icon: string;
title: string;
data: any;
link?: string;
}) {
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-[18px] w-32 animate-pulse rounded bg-highlight-primary" />
<span className="h-[18px] 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 w-full items-center justify-between">
<div className="flex-col">
<h2 className="text-xl font-semibold">{data}</h2>
<p className="text-muted">{title}</p>
</div>
{link && (
<AppLink
className="text-highlight-secondary transition-colors duration-150 hover:text-brand"
href={getURL(link)}
>
<Icon name="arrow-right-line" />
</AppLink>
)}
</div>
</div>
);
}