File size: 3,666 Bytes
6111b2b | 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | "use client";
import { cn } from "@/shared/utils/cn";
interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
children?: React.ReactNode;
title?: React.ReactNode;
subtitle?: React.ReactNode;
icon?: string;
action?: React.ReactNode;
padding?: "none" | "xs" | "sm" | "md" | "lg";
hover?: boolean;
className?: string;
}
export default function Card({
children,
title,
subtitle,
icon,
action,
padding = "md",
hover = false,
className,
...props
}: CardProps) {
const paddings = {
none: "",
xs: "p-3",
sm: "p-4",
md: "p-6",
lg: "p-8",
};
return (
<div
className={cn(
"bg-surface",
"border border-black/5 dark:border-white/5",
"rounded-lg shadow-sm",
hover && "hover:shadow-md hover:border-primary/30 transition-all cursor-pointer",
paddings[padding],
className
)}
{...props}
>
{(title || action) && (
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
{icon && (
<div className="p-2 rounded-lg bg-bg text-text-muted">
<span className="material-symbols-outlined text-[20px]">{icon}</span>
</div>
)}
<div>
{title && <h3 className="text-text-main font-semibold">{title}</h3>}
{subtitle && <p className="text-sm text-text-muted">{subtitle}</p>}
</div>
</div>
{action}
</div>
)}
{children}
</div>
);
}
interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
}
// Sub-component: Bordered section inside Card
Card.Section = function CardSection({ children, className, ...props }: CardSectionProps) {
return (
<div
className={cn(
"p-4 rounded-lg",
"bg-black/[0.02] dark:bg-white/[0.02]",
"border border-black/5 dark:border-white/5",
className
)}
{...props}
>
{children}
</div>
);
};
interface CardRowProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
}
// Sub-component: Hoverable row inside Card
Card.Row = function CardRow({ children, className, ...props }: CardRowProps) {
return (
<div
className={cn(
"p-3 -mx-3 px-3 transition-colors",
"border-b border-black/5 dark:border-white/5 last:border-b-0",
"hover:bg-black/[0.02] dark:hover:bg-white/[0.02]",
className
)}
{...props}
>
{children}
</div>
);
};
interface CardListItemProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
actions?: React.ReactNode;
}
// Sub-component: List item with hover actions (macOS style)
Card.ListItem = function CardListItem({
children,
actions,
className,
...props
}: CardListItemProps) {
return (
<div
className={cn(
"group flex items-center justify-between p-3 -mx-3 px-3",
"border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0",
"hover:bg-black/[0.02] dark:hover:bg-white/[0.02]",
"transition-colors",
className
)}
{...props}
>
<div className="flex-1 min-w-0">{children}</div>
{actions && (
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
{actions}
</div>
)}
</div>
);
};
|