46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import { ChevronRightIcon } from 'lucide-react';
|
|
|
|
export const DocsCard: React.FC<
|
|
React.PropsWithChildren<{
|
|
label: string;
|
|
subtitle?: string | null;
|
|
link?: { url: string; label: string };
|
|
}>
|
|
> = ({ label, subtitle, children, link }) => {
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div
|
|
className={`flex grow flex-col space-y-2.5 border bg-background p-6
|
|
${link ? 'rounded-t-2xl border-b-0' : 'rounded-2xl'}`}
|
|
>
|
|
<h3 className="mt-0 text-lg font-semibold dark:text-white">{label}</h3>
|
|
|
|
{subtitle && (
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
|
<p>{subtitle}</p>
|
|
</div>
|
|
)}
|
|
|
|
{children && <div className="text-sm">{children}</div>}
|
|
</div>
|
|
|
|
{link && (
|
|
<div className="rounded-b-2xl border bg-muted p-6 py-4 dark:bg-background">
|
|
<span className={'flex items-center space-x-2'}>
|
|
<Link
|
|
className={'text-sm font-medium hover:underline'}
|
|
href={`/docs/${link.url}`}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
|
|
<ChevronRightIcon className={'h-4'} />
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|