Skip to content

Commit 4a1b2bf

Browse files
jamiepinejamiepine
committed
better card
1 parent eb88c25 commit 4a1b2bf

1 file changed

Lines changed: 84 additions & 76 deletions

File tree

‎packages/primitives/src/Card.tsx‎

Lines changed: 84 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,95 @@
1-
import { clsx } from 'clsx';
2-
import { forwardRef } from 'react';
1+
import {clsx} from "clsx";
2+
import {forwardRef} from "react";
33

4-
type CardVariant = 'default' | 'dark';
4+
type CardVariant = "default" | "dark";
55

66
const variantStyles: Record<CardVariant, string> = {
7-
default: 'bg-app-box',
8-
dark: 'bg-app-dark-box',
7+
default: "bg-app-box",
8+
dark: "bg-app",
99
};
1010

1111
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
12-
variant?: CardVariant;
12+
variant?: CardVariant;
1313
}
1414

1515
const Card = forwardRef<HTMLDivElement, CardProps>(
16-
({ className, variant = 'default', ...props }, ref) => (
17-
<div
18-
ref={ref}
19-
className={clsx(
20-
'rounded-lg border border-app-line text-ink shadow-sm',
21-
variantStyles[variant],
22-
className
23-
)}
24-
{...props}
25-
/>
26-
)
16+
({className, variant = "default", ...props}, ref) => (
17+
<div
18+
ref={ref}
19+
className={clsx(
20+
"rounded-2xl border border-app-line text-ink shadow-sm",
21+
variantStyles[variant],
22+
className,
23+
)}
24+
{...props}
25+
/>
26+
),
2727
);
2828

29-
Card.displayName = 'Card';
30-
31-
const CardHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
32-
({ className, ...props }, ref) => (
33-
<div
34-
ref={ref}
35-
className={clsx('flex flex-col space-y-1.5 p-6', className)}
36-
{...props}
37-
/>
38-
)
39-
);
40-
41-
CardHeader.displayName = 'CardHeader';
42-
43-
const CardTitle = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
44-
({ className, ...props }, ref) => (
45-
<h3
46-
ref={ref}
47-
className={clsx('text-2xl font-semibold leading-none tracking-tight text-ink', className)}
48-
{...props}
49-
/>
50-
)
51-
);
52-
53-
CardTitle.displayName = 'CardTitle';
54-
55-
const CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
56-
({ className, ...props }, ref) => (
57-
<p
58-
ref={ref}
59-
className={clsx('text-sm text-ink-dull', className)}
60-
{...props}
61-
/>
62-
)
63-
);
64-
65-
CardDescription.displayName = 'CardDescription';
66-
67-
const CardContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
68-
({ className, ...props }, ref) => (
69-
<div ref={ref} className={clsx('p-6 pt-0', className)} {...props} />
70-
)
71-
);
72-
73-
CardContent.displayName = 'CardContent';
74-
75-
const CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
76-
({ className, ...props }, ref) => (
77-
<div
78-
ref={ref}
79-
className={clsx('flex items-center p-6 pt-0', className)}
80-
{...props}
81-
/>
82-
)
83-
);
84-
85-
CardFooter.displayName = 'CardFooter';
86-
87-
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
29+
Card.displayName = "Card";
30+
31+
const CardHeader = forwardRef<
32+
HTMLDivElement,
33+
React.HTMLAttributes<HTMLDivElement>
34+
>(({className, ...props}, ref) => (
35+
<div
36+
ref={ref}
37+
className={clsx("flex flex-col space-y-1.5 p-6", className)}
38+
{...props}
39+
/>
40+
));
41+
42+
CardHeader.displayName = "CardHeader";
43+
44+
const CardTitle = forwardRef<
45+
HTMLParagraphElement,
46+
React.HTMLAttributes<HTMLHeadingElement>
47+
>(({className, ...props}, ref) => (
48+
<h3
49+
ref={ref}
50+
className={clsx(
51+
"text-2xl font-semibold leading-none tracking-tight text-ink",
52+
className,
53+
)}
54+
{...props}
55+
/>
56+
));
57+
58+
CardTitle.displayName = "CardTitle";
59+
60+
const CardDescription = forwardRef<
61+
HTMLParagraphElement,
62+
React.HTMLAttributes<HTMLParagraphElement>
63+
>(({className, ...props}, ref) => (
64+
<p
65+
ref={ref}
66+
className={clsx("text-sm text-ink-dull", className)}
67+
{...props}
68+
/>
69+
));
70+
71+
CardDescription.displayName = "CardDescription";
72+
73+
const CardContent = forwardRef<
74+
HTMLDivElement,
75+
React.HTMLAttributes<HTMLDivElement>
76+
>(({className, ...props}, ref) => (
77+
<div ref={ref} className={clsx("p-6 pt-0", className)} {...props} />
78+
));
79+
80+
CardContent.displayName = "CardContent";
81+
82+
const CardFooter = forwardRef<
83+
HTMLDivElement,
84+
React.HTMLAttributes<HTMLDivElement>
85+
>(({className, ...props}, ref) => (
86+
<div
87+
ref={ref}
88+
className={clsx("flex items-center p-6 pt-0", className)}
89+
{...props}
90+
/>
91+
));
92+
93+
CardFooter.displayName = "CardFooter";
94+
95+
export {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent};

0 commit comments

Comments
 (0)