42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
import * as Icons from "lucide-react";
|
|
import Link from "next/link";
|
|
import clsx from "clsx";
|
|
|
|
type IconName = keyof typeof Icons;
|
|
|
|
interface CardProps {
|
|
title: string;
|
|
icon?: IconName;
|
|
href?: string;
|
|
horizontal?: boolean;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const Card: React.FC<CardProps> = ({ title, icon, href, horizontal, children, className }) => {
|
|
const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null;
|
|
|
|
const content = (
|
|
<div
|
|
className={clsx(
|
|
"border rounded-lg shadow-sm p-4 transition-all duration-200 bg-white dark:bg-gray-900",
|
|
"hover:bg-gray-50 dark:hover:bg-gray-800",
|
|
"flex gap-2",
|
|
horizontal ? "flex-row items-center gap-1" : "flex-col space-y-1",
|
|
className
|
|
)}
|
|
>
|
|
{Icon && <Icon className="w-5 h-5 text-primary flex-shrink-0" />}
|
|
<div className="flex-1 min-w-0 my-auto h-full">
|
|
<span className="text-base font-semibold">{title}</span>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400 -mt-3">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return href ? <Link className="no-underline block" href={href}>{content}</Link> : content;
|
|
};
|
|
|
|
export default Card;
|