Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 10x 10x 109x 1x 1x | import type { HTMLAttributes } from "react";
import { cn } from "@/utils/class-name";
const CARD_VARIANT_CLASSES = {
glass:
"border border-white/10 bg-glass shadow-navy-lg backdrop-blur-md light:border-slate-200 light:bg-white light:shadow-glass-card-light",
panel: "border border-white/8 bg-white/4 backdrop-blur-[20px] light:border-slate-200 light:bg-white light:shadow-sm",
soft: "border border-white/8 bg-white/6 light:border-slate-200 light:bg-white/90 light:shadow-sm",
success: "border border-emerald-400/28 bg-emerald-500/10",
danger: "border border-rose-400/28 bg-rose-500/10",
} as const;
type CardVariant = keyof typeof CARD_VARIANT_CLASSES;
export type CardProps = HTMLAttributes<HTMLDivElement> & {
variant?: CardVariant;
};
export function Card({
variant = "glass",
className,
...props
}: CardProps) {
return (
<div
className={cn("rounded-2xl text-white/80 light:text-slate-800", CARD_VARIANT_CLASSES[variant], className)}
{...props}
/>
);
}
export function CardHeader({
className,
...props
}: HTMLAttributes<HTMLDivElement>) {
return <div className={cn("border-b border-white/8 px-4 py-3 text-white/80 light:border-slate-200 light:text-slate-800", className)} {...props} />;
}
export function CardContent({
className,
...props
}: HTMLAttributes<HTMLDivElement>) {
return <div className={cn("px-4 py-3 text-white/70 light:text-slate-700", className)} {...props} />;
}
|