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