43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import type { HTMLAttributes } from "react";
|
||
import { cva, type VariantProps } from "class-variance-authority";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* 卡片变体，对应 DESIGN.md：
|
||
* - base → card-base（白底 + hairline 描边）
|
||
* - feature → card-feature（surface 底、无描边）
|
||
* - mockup → hero-product-mockup（含大扩散阴影，仅 Hero 使用）
|
||
*/
|
||
export const cardVariants = cva("", {
|
||
variants: {
|
||
variant: {
|
||
base: "bg-canvas border border-hairline rounded-lg",
|
||
feature: "bg-surface rounded-lg",
|
||
mockup: "bg-canvas border border-hairline-soft rounded-lg shadow-mockup",
|
||
},
|
||
padding: {
|
||
none: "p-0",
|
||
sm: "p-md",
|
||
md: "p-xl",
|
||
lg: "p-xxl",
|
||
},
|
||
},
|
||
defaultVariants: {
|
||
variant: "base",
|
||
padding: "md",
|
||
},
|
||
});
|
||
|
||
export type CardProps = HTMLAttributes<HTMLDivElement> &
|
||
VariantProps<typeof cardVariants>;
|
||
|
||
/** 通用卡片容器 */
|
||
export function Card({ className, variant, padding, ...props }: CardProps) {
|
||
return (
|
||
<div
|
||
className={cn(cardVariants({ variant, padding }), className)}
|
||
{...props}
|
||
/>
|
||
);
|
||
}
|