Skip to content

Commit eb3123f

Browse files
ariflogsariflogs
committed
added badge varients
1 parent 56e5d6a commit eb3123f

File tree

13 files changed

+125
-32
lines changed

13 files changed

+125
-32
lines changed

‎.vscode/settings.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"cSpell.words": ["clsx"],
3+
"tailwindCSS.experimental.classRegex": [
4+
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
5+
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
6+
]
7+
}

‎app/(sink)/demo/components/page.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Badge } from '@/packages/ui'
2+
import React from 'react'
3+
4+
export default function page() {
5+
return (
6+
<div className='container max-w-6xl mx-auto'>
7+
<div className="space-x-4">
8+
<Badge>Badge</Badge>
9+
<Badge variant="success">Badge</Badge>
10+
<Badge variant="error">Badge</Badge>
11+
<Badge variant="filled">Badge</Badge>
12+
</div>
13+
</div>
14+
)
15+
}

‎app/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function RootLayout({
3939
<body
4040
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
4141
>
42-
<div className="mb-8 relative z-10">
42+
<div className="mb-20 relative z-10">
4343
<TopNav />
4444
</div>
4545
{children}

‎config/components.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,21 @@ export const componentConfig = {
6060
"badge-style-success": {
6161
name: "badge-style-default",
6262
preview: lazy(() => import("@/preview/components/badge-style-success")),
63-
codeHtml: `<span className="border-green-600 text-green-600 bg-green-50 border-2 px-2 py-1 text-sm">
63+
codeHtml: `<span className="border-2 border-green-600 text-green-600 px-2.5 py-1 text-sm">
6464
Badge
6565
</span>`,
6666
},
6767
"badge-style-error": {
6868
name: "badge-style-default",
6969
preview: lazy(() => import("@/preview/components/badge-style-error")),
70-
codeHtml: `<span className="border-red-600 text-red-600 bg-red-50 border-2 px-2 py-1 text-sm">
70+
codeHtml: `<span className="border-2 border-red-600 text-red-600 px-2.5 py-1 text-sm">
71+
Badge
72+
</span>`,
73+
},
74+
"badge-style-filled": {
75+
name: "badge-style-default",
76+
preview: lazy(() => import("@/preview/components/badge-style-filled")),
77+
codeHtml: `<span className="border-2 bg-primary-400 border-black text-black px-2.5 py-1 text-sm">
7178
Badge
7279
</span>`,
7380
},
@@ -97,7 +104,9 @@ export const componentConfig = {
97104
},
98105
"textarea-style-default": {
99106
name: "textarea-style-default",
100-
preview: lazy(() => import("@/preview/components/textarea-style-default")),
107+
preview: lazy(
108+
() => import("@/preview/components/textarea-style-default")
109+
),
101110
codeHtml: `<textarea
102111
rows="4"
103112
placeholder="type something..."

‎content/docs/components/badge.mdx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,11 @@ lastUpdated: 30 Sep, 2024
2121
## Error
2222
<hr/>
2323
<br/>
24-
<ComponentShowcase name="badge-style-error" />
24+
<ComponentShowcase name="badge-style-error" />
25+
<br/>
26+
<br/>
27+
28+
## Filled
29+
<hr />
30+
<br />
31+
<ComponentShowcase name="badge-style-filled" />

‎lib/utils.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import clsx from "clsx";
2+
import { ClassNameValue, twMerge } from "tailwind-merge";
3+
4+
export function cn(...classes: ClassNameValue[]) {
5+
return twMerge(clsx(classes));
6+
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@
1010
},
1111
"dependencies": {
1212
"bright": "^0.8.5",
13+
"class-variance-authority": "^0.7.0",
14+
"clsx": "^2.1.1",
1315
"contentlayer": "^0.3.4",
1416
"date-fns": "^4.1.0",
1517
"lucide-react": "^0.445.0",
1618
"next": "14.2.7",
1719
"next-contentlayer": "^0.3.4",
1820
"react": "^18",
19-
"react-dom": "^18"
21+
"react-dom": "^18",
22+
"tailwind-merge": "^2.5.3"
2023
},
2124
"devDependencies": {
2225
"@types/node": "^20",

‎packages/ui/Badges/Badge.tsx

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
1+
import { cn } from "@/lib/utils";
2+
import { cva, VariantProps } from "class-variance-authority";
13
import React, { HTMLAttributes } from "react";
24

3-
const variants = {
4-
default: "border-black text-black",
5-
error: "border-red-600 text-red-600",
6-
success: "border-green-600 text-green-600",
7-
};
5+
const badgeVariants = cva("font-semibold border-2", {
6+
variants: {
7+
variant: {
8+
default: "border-black text-black",
9+
error: "border-red-600 text-red-600",
10+
success: "border-green-600 text-green-600",
11+
filled: "bg-primary-400 border-black text-black",
12+
},
13+
size: {
14+
sm: "px-2 py-.5 text-xs",
15+
md: "px-2.5 py-1 text-sm",
16+
lg: "px-3 py-1.5 text-base",
17+
},
18+
},
19+
defaultVariants: {
20+
variant: "default",
21+
size: "md",
22+
},
23+
});
824

9-
interface ButtonProps extends HTMLAttributes<HTMLSpanElement> {
10-
size?: "sm" | "md" | "lg";
11-
variant?: keyof typeof variants;
12-
className?: string;
13-
}
25+
interface ButtonProps
26+
extends HTMLAttributes<HTMLSpanElement>,
27+
VariantProps<typeof badgeVariants> {}
1428

1529
export function Badge({
1630
children,
@@ -19,15 +33,9 @@ export function Badge({
1933
className = "",
2034
...props
2135
}: ButtonProps) {
22-
const sizeClasses = {
23-
sm: "px-4 py-1 text-sm",
24-
md: "px-2 py-1 text-sm",
25-
lg: "px-8 py-3 text-lg",
26-
};
27-
2836
return (
2937
<span
30-
className={`text-primary-foreground border-2 ${variants[variant]} ${sizeClasses[size]} ${className}`}
38+
className={cn(badgeVariants({ variant, size }), className)}
3139
{...props}
3240
>
3341
{children}

‎pnpm-lock.yaml

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎preview/components/badge-style-default.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1+
import { Badge } from "@/packages/ui";
12
import React from "react";
23

34
export default function BadgeStyleDefault() {
45
return (
5-
<span className="border-black text-black border-2 px-2 py-1 text-sm">
6-
Badge
7-
</span>
6+
<Badge>Default Badge</Badge>
87
);
98
}

0 commit comments

Comments
 (0)