Skip to content

Commit 5a4f24d

Browse files
websidduwebsiddu
committed
feat: Adding cards component
1 parent f260618 commit 5a4f24d

File tree

4 files changed

+213
-0
lines changed

4 files changed

+213
-0
lines changed

‎lib/Card/Card.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import clsx from 'clsx';
2+
3+
export const CardGroup = ({
4+
size = 'md',
5+
children,
6+
}: {
7+
children: React.ReactNode;
8+
size?: 'sm' | 'md' | 'lg';
9+
}) => {
10+
const classes = {
11+
sm: 'grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4',
12+
md: 'grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3',
13+
lg: 'grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2',
14+
};
15+
16+
return <div className={clsx('grid', classes[size])}>{children}</div>;
17+
};
18+
19+
export const Card = ({
20+
icon,
21+
title,
22+
description,
23+
link,
24+
className,
25+
}: {
26+
icon?: string;
27+
title: string;
28+
description?: string;
29+
link?: string;
30+
className?: string;
31+
}) => {
32+
const card = (
33+
<div
34+
className={clsx(
35+
'shadow-sm border rounded-xl flex p-3 flex-col items-center justify-center',
36+
className,
37+
)}
38+
>
39+
{icon && (
40+
<div className="">
41+
<img
42+
src={icon}
43+
alt={title}
44+
className="w-10 h-10 object-contain mb-2"
45+
/>
46+
</div>
47+
)}
48+
<div className="flex items-center justify-center flex-col">
49+
<h3 className="font-semibold">{title}</h3>
50+
{description && <p className="opacity-60">{description}</p>}
51+
</div>
52+
</div>
53+
);
54+
55+
return link ? (
56+
<a
57+
href={link}
58+
className="hover:shadow-sm overflow-hidden rounded-xl transition-shadow duration-200"
59+
target="_blank"
60+
>
61+
{card}
62+
</a>
63+
) : (
64+
card
65+
);
66+
};

‎src/components/SideNav.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ export const components = [
1313
'A callout is a small piece of text that is used to "call out" a feature or highlight a specific piece of information.',
1414
route: '/components/callouts',
1515
},
16+
{
17+
name: 'Cards',
18+
description: 'A card is a flexible and extensible content container.',
19+
route: '/components/cards',
20+
},
1621
{
1722
name: 'Accordion',
1823
description:

‎src/main.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { TypographySamples } from './pages/TypographySamples.tsx';
1111
import { ImageSamples } from './pages/ImageSamples.tsx';
1212
import { CodeSamples } from './pages/CodeSamples.tsx';
1313
import { ThemeProvider } from './components/Theme.tsx';
14+
import { CardSamples } from './pages/CardSamples.tsx';
1415

1516
const components: { [key: string]: React.ReactElement } = {
1617
accordion: <AccordionSamples />,
@@ -20,6 +21,7 @@ const components: { [key: string]: React.ReactElement } = {
2021
typography: <TypographySamples />,
2122
image: <ImageSamples />,
2223
code: <CodeSamples />,
24+
cards: <CardSamples />,
2325
};
2426

2527
createRoot(document.getElementById('root')!).render(

‎src/pages/CardSamples.tsx

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { Card, CardGroup } from '../../lib/Card/Card';
2+
3+
export function CardSamples() {
4+
return (
5+
<div className="flex flex-col gap-4">
6+
<CardGroup size="sm">
7+
<Card
8+
title="Next.js"
9+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
10+
link="https://example.com"
11+
/>
12+
<Card
13+
title="Next.js"
14+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
15+
link="https://example.com"
16+
/>
17+
<Card
18+
title="Next.js"
19+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
20+
link="https://example.com"
21+
/>
22+
<Card
23+
title="Next.js"
24+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
25+
link="https://example.com"
26+
/>
27+
<Card
28+
title="Next.js"
29+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
30+
link="https://example.com"
31+
/>
32+
<Card
33+
title="Next.js"
34+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
35+
link="https://example.com"
36+
/>
37+
<Card
38+
title="Next.js"
39+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
40+
link="https://example.com"
41+
/>
42+
<Card
43+
title="Next.js"
44+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
45+
link="https://example.com"
46+
/>
47+
</CardGroup>
48+
49+
<hr />
50+
51+
<CardGroup size="md">
52+
<Card
53+
title="Next.js"
54+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
55+
link="https://example.com"
56+
/>
57+
<Card
58+
title="Next.js"
59+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
60+
link="https://example.com"
61+
/>
62+
<Card
63+
title="Next.js"
64+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
65+
link="https://example.com"
66+
/>
67+
<Card
68+
title="Next.js"
69+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
70+
link="https://example.com"
71+
/>
72+
<Card
73+
title="Next.js"
74+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
75+
link="https://example.com"
76+
/>
77+
<Card
78+
title="Next.js"
79+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
80+
link="https://example.com"
81+
/>
82+
<Card
83+
title="Next.js"
84+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
85+
link="https://example.com"
86+
/>
87+
<Card
88+
title="Next.js"
89+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
90+
link="https://example.com"
91+
/>
92+
</CardGroup>
93+
94+
<hr />
95+
96+
<CardGroup size="lg">
97+
<Card
98+
title="Next.js"
99+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
100+
link="https://example.com"
101+
/>
102+
<Card
103+
title="Next.js"
104+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
105+
link="https://example.com"
106+
/>
107+
<Card
108+
title="Next.js"
109+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
110+
link="https://example.com"
111+
/>
112+
<Card
113+
title="Next.js"
114+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
115+
link="https://example.com"
116+
/>
117+
<Card
118+
title="Next.js"
119+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
120+
link="https://example.com"
121+
/>
122+
<Card
123+
title="Next.js"
124+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
125+
link="https://example.com"
126+
/>
127+
<Card
128+
title="Next.js"
129+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
130+
link="https://example.com"
131+
/>
132+
<Card
133+
title="Next.js"
134+
icon="https://www.svgrepo.com/show/354113/nextjs-icon.svg"
135+
link="https://example.com"
136+
/>
137+
</CardGroup>
138+
</div>
139+
);
140+
}

0 commit comments

Comments
 (0)