Blame · card.tsx

4dfd09b	1	const variantStyles = {
4dfd09b	2	default: {
4dfd09b	3	backgroundColor: "var(--bg-card)",
4dfd09b	4	border: "1px solid var(--border-subtle)",
4dfd09b	5	},
4dfd09b	6	inset: {
4dfd09b	7	backgroundColor: "var(--bg-inset)",
4dfd09b	8	border: "1px solid var(--border)",
4dfd09b	9	},
4dfd09b	10	} as const;
4dfd09b	11
4dfd09b	12	export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
4dfd09b	13	variant?: "default" \| "inset";
4dfd09b	14	noPadding?: boolean;
4dfd09b	15	hoverable?: boolean;
4dfd09b	16	}
4dfd09b	17
4dfd09b	18	export function Card({
4dfd09b	19	variant = "default",
4dfd09b	20	noPadding = false,
4dfd09b	21	hoverable = false,
4dfd09b	22	className = "",
4dfd09b	23	style,
4dfd09b	24	children,
4dfd09b	25	...props
4dfd09b	26	}: CardProps) {
4dfd09b	27	return (
4dfd09b	28	<div
4dfd09b	29	className={`${noPadding ? "" : "p-3"} ${hoverable ? "card-hover" : ""} ${className}`}
4dfd09b	30	style={{ ...variantStyles[variant], ...style }}
4dfd09b	31	{...props}
4dfd09b	32	>
4dfd09b	33	{children}
4dfd09b	34	</div>
4dfd09b	35	);
4dfd09b	36	}
4dfd09b	37
4dfd09b	38	export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
4dfd09b	39
4dfd09b	40	export function CardHeader({
4dfd09b	41	className = "",
4dfd09b	42	style,
4dfd09b	43	children,
4dfd09b	44	...props
4dfd09b	45	}: CardHeaderProps) {
4dfd09b	46	return (
4dfd09b	47	<div
4dfd09b	48	className={`px-3 py-2 ${className}`}
4dfd09b	49	style={{
4dfd09b	50	backgroundColor: "var(--bg-inset)",
4dfd09b	51	borderBottom: "1px solid var(--border-subtle)",
4dfd09b	52	...style,
4dfd09b	53	}}
4dfd09b	54	{...props}
4dfd09b	55	>
4dfd09b	56	{children}
4dfd09b	57	</div>
4dfd09b	58	);
4dfd09b	59	}
4dfd09b	60
4dfd09b	61	export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
4dfd09b	62
4dfd09b	63	export function CardFooter({
4dfd09b	64	className = "",
4dfd09b	65	style,
4dfd09b	66	children,
4dfd09b	67	...props
4dfd09b	68	}: CardFooterProps) {
4dfd09b	69	return (
4dfd09b	70	<div
4dfd09b	71	className={`px-3 py-2 ${className}`}
4dfd09b	72	style={{
4dfd09b	73	borderTop: "1px solid var(--border-subtle)",
4dfd09b	74	...style,
4dfd09b	75	}}
4dfd09b	76	{...props}
4dfd09b	77	>
4dfd09b	78	{children}
4dfd09b	79	</div>
4dfd09b	80	);
4dfd09b	81	}