Spaces:
Sleeping
Sleeping
File size: 2,753 Bytes
1460b37 | 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 | "use client";
import { cn } from "@/shared/utils/cn";
export default function Card({
children,
title,
subtitle,
icon,
action,
padding = "md",
hover = false,
elev = false,
className,
...props
}) {
const paddings = {
none: "",
xs: "p-3",
sm: "p-4",
md: "p-6",
lg: "p-8",
};
return (
<div
className={cn(
"bg-surface border border-border-subtle",
elev ? "rounded-[14px] shadow-[var(--shadow-elev)]" : "rounded-[14px] shadow-[var(--shadow-soft)]",
hover && "hover:shadow-[var(--shadow-warm)] hover:border-brand-500/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-[10px] 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>
);
}
Card.Section = function CardSection({ children, className, ...props }) {
return (
<div
className={cn(
"p-4 rounded-[10px]",
"bg-bg border border-border-subtle",
className
)}
{...props}
>
{children}
</div>
);
};
Card.Row = function CardRow({ children, className, ...props }) {
return (
<div
className={cn(
"p-3 -mx-3 px-3 transition-colors",
"border-b border-border-subtle last:border-b-0",
"hover:bg-surface-2/50",
className
)}
{...props}
>
{children}
</div>
);
};
Card.ListItem = function CardListItem({
children,
actions,
className,
...props
}) {
return (
<div
className={cn(
"group flex items-center justify-between p-3 -mx-3 px-3",
"border-b border-border-subtle last:border-b-0",
"hover:bg-surface-2/50 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 transition-opacity">
{actions}
</div>
)}
</div>
);
};
|