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 46 47 48 49 50 | 3x 21x 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-glass backdrop-blur-md light:border-app-border-10 light:bg-[image:var(--bg-glass-panel)] light:shadow-glass",
panel:
"border border-white/8 bg-white/4 backdrop-blur-[20px] light:border-app-border-8 light:bg-app-surface-4 light:shadow-card-surface",
soft: "border border-white/8 bg-white/6 light:border-app-border-8 light:bg-app-surface-6 light:shadow-card-surface-soft",
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", 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 light:border-app-border-8",
className,
)}
{...props}
/>
);
}
export function CardContent({
className,
...props
}: HTMLAttributes<HTMLDivElement>) {
return <div className={cn("px-4 py-3", className)} {...props} />;
}
|