Skip to content

Commit fede845

Browse files
ariflogsariflogs
committed
added tabs with new code preview
1 parent a1134f4 commit fede845

File tree

14 files changed

+367
-72
lines changed

14 files changed

+367
-72
lines changed

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

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,43 @@
1-
import { Badge, Button } from '@/packages/ui'
2-
import React from 'react'
1+
import {
2+
Badge,
3+
Button,
4+
Tabs,
5+
TabsContent,
6+
TabsPanels,
7+
TabsTrigger,
8+
TabsTriggerList,
9+
} from "@/packages/ui";
10+
import React from "react";
311

412
export default function page() {
513
return (
6-
<div className='container max-w-6xl mx-auto'>
7-
<div className="space-x-4">
8-
<Button>Default Button</Button>
9-
<Button variant="outline">Outline Button</Button>
10-
<Button variant="link">Link Button</Button>
11-
</div>
12-
<div className="space-x-4">
13-
<Badge>Badge</Badge>
14-
<Badge variant="success">Badge</Badge>
15-
<Badge variant="error">Badge</Badge>
16-
<Badge variant="filled">Badge</Badge>
17-
</div>
14+
<div className="container max-w-6xl mx-auto space-y-6">
15+
<div className="space-x-4">
16+
<Button>Default Button</Button>
17+
<Button variant="outline">Outline Button</Button>
18+
<Button variant="link">Link Button</Button>
19+
</div>
20+
<div className="space-x-4">
21+
<Badge>Badge</Badge>
22+
<Badge variant="success">Badge</Badge>
23+
<Badge variant="error">Badge</Badge>
24+
<Badge variant="filled">Badge</Badge>
25+
</div>
26+
27+
<div>
28+
<Tabs>
29+
<TabsTriggerList>
30+
<TabsTrigger>Tab 1</TabsTrigger>
31+
<TabsTrigger>Tab 2</TabsTrigger>
32+
<TabsTrigger>Tab 3</TabsTrigger>
33+
</TabsTriggerList>
34+
<TabsPanels>
35+
<TabsContent>Content 1</TabsContent>
36+
<TabsContent>Content 2</TabsContent>
37+
<TabsContent>Content 3</TabsContent>
38+
</TabsPanels>
39+
</Tabs>
40+
</div>
1841
</div>
19-
)
42+
);
2043
}

‎components/ComponentShowcase.tsx

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { componentConfig } from "@/config";
22
import { H5 } from "@/packages/ui";
3+
import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
34
import React, { HTMLAttributes } from "react";
45

56
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
@@ -11,18 +12,25 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
1112
const Code = React.Children.toArray(children)[0];
1213

1314
return (
14-
<div className="space-y-6">
15-
<div>
16-
<H5>Preview</H5>
17-
<div className="mt-2 border rounded p-6">
18-
<Preview />
19-
</div>
20-
</div>
21-
22-
<div>
23-
<H5>Code</H5>
24-
<div className="relative rounded overflow-auto">{Code}</div>
25-
</div>
26-
</div>
15+
<TabGroup>
16+
<TabList className="space-x-4 mb-4">
17+
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
18+
Preview
19+
</Tab>
20+
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
21+
Code
22+
</Tab>
23+
</TabList>
24+
<TabPanels>
25+
<TabPanel>
26+
<div className="border rounded p-6">
27+
<Preview />
28+
</div>
29+
</TabPanel>
30+
<TabPanel>
31+
<div className="relative rounded overflow-auto">{Code}</div>
32+
</TabPanel>
33+
</TabPanels>
34+
</TabGroup>
2735
);
2836
}

‎config/components.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,10 @@ export const componentConfig = {
6666
filePath: "preview/components/typography-p.tsx",
6767
preview: lazy(() => import("@/preview/components/typography-p")),
6868
},
69+
"tab-style-default": {
70+
name: "typography-p",
71+
filePath: "preview/components/tab-style-default.tsx",
72+
preview: lazy(() => import("@/preview/components/tab-style-default")),
73+
},
6974
},
7075
};

‎config/navigation.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const navConfig: INavigationConfig = {
2121
{ title: "Button", href: `${componentsRoute}/button` },
2222
{ title: "Card", href: `${componentsRoute}/card` },
2323
{ title: "Input", href: `${componentsRoute}/input` },
24+
{ title: "Tab", href: `${componentsRoute}/tab` },
2425
{ title: "Textarea", href: `${componentsRoute}/textarea` },
2526
{ title: "Typography", href: `${componentsRoute}/typography` },
2627
],

‎content/docs/components/tab.mdx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Tabs
3+
description: Switch between different views using tabs.
4+
lastUpdated: 08 Oct, 2024
5+
---
6+
7+
<ComponentShowcase name="tab-style-default" />

‎contentlayer.config.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ export default makeSource({
4242
const component = componentConfig.registry[name];
4343
const filePath = path.join(process.cwd(), component.filePath);
4444
const source = fs.readFileSync(filePath, "utf8");
45-
const cleanedJSX = source
46-
.replace(/export default function \w+\(\) \{\n?/g, "") // removes function wrapper
47-
.replace(/return\s*\(\s*/g, "") // removes return statement
48-
.replace(/\n\s*\);?\s*\}\s*$/g, "") // Removes closing parenthesis, semicolon, and closing brace at the end of the function
49-
.replace(/\n\s*\n/g, "\n") // removes extra new lines
50-
.trim()
51-
.split("\n")
52-
.map((line) => line.replace(/^ {4}/gm, ""))
53-
.join("\n");
45+
// const cleanedJSX = source
46+
// .replace(/export default function \w+\(\) \{\n?/g, "") // removes function wrapper
47+
// .replace(/return\s*\(\s*/g, "") // removes return statement
48+
// .replace(/\n\s*\);?\s*\}\s*$/g, "") // Removes closing parenthesis, semicolon, and closing brace at the end of the function
49+
// .replace(/\n\s*\n/g, "\n") // removes extra new lines
50+
// .trim()
51+
// .split("\n")
52+
// .map((line) => line.replace(/^ {4}/gm, ""))
53+
// .join("\n");
5454

5555
node.children?.push(
5656
u("element", {
@@ -67,7 +67,7 @@ export default makeSource({
6767
children: [
6868
{
6969
type: "text",
70-
value: cleanedJSX,
70+
value: source,
7171
},
7272
],
7373
}),

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@headlessui/react": "^2.1.9",
1213
"class-variance-authority": "^0.7.0",
1314
"clsx": "^2.1.1",
1415
"contentlayer": "^0.3.4",

‎packages/ui/Badges/Badge.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import { cn } from "@/lib/utils";
22
import { cva, VariantProps } from "class-variance-authority";
33
import React, { HTMLAttributes } from "react";
44

5-
const badgeVariants = cva("font-semibold border-2", {
5+
const badgeVariants = cva("font-semibold ", {
66
variants: {
77
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",
8+
default: "border-2 border-black text-black",
9+
error: "border-2 border-red-600 text-red-600",
10+
success: "border-2 border-green-600 text-green-600",
11+
filled: "bg-purple-200 text-purple-600 rounded",
1212
},
1313
size: {
1414
sm: "px-2 py-.5 text-xs",

‎packages/ui/Buttons/Button.tsx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,26 @@ import { cn } from "@/lib/utils";
22
import { cva, VariantProps } from "class-variance-authority";
33
import React, { ButtonHTMLAttributes } from "react";
44

5-
const buttonVariants = cva(
6-
"font-head border-2 border-black shadow-md hover:shadow-xs transition-all",
7-
{
8-
variants: {
9-
variant: {
10-
default:
11-
"bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
12-
outline: "bg-transparent text-black border-2 border-black",
13-
link: "bg-transparent text-primary-400 hover:underline",
14-
},
15-
size: {
16-
sm: "px-4 py-1 text-sm",
17-
md: "px-6 py-2 text-base",
18-
lg: "px-8 py-3 text-lg",
19-
},
5+
const buttonVariants = cva("font-head transition-all", {
6+
variants: {
7+
variant: {
8+
default:
9+
"shadow-md hover:shadow-xs bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
10+
outline:
11+
"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black",
12+
link: "bg-transparent text-black hover:underline",
2013
},
21-
defaultVariants: {
22-
size: "md",
23-
variant: "default",
14+
size: {
15+
sm: "px-4 py-1 text-sm",
16+
md: "px-6 py-2 text-base",
17+
lg: "px-8 py-3 text-lg",
2418
},
25-
}
26-
);
19+
},
20+
defaultVariants: {
21+
size: "md",
22+
variant: "default",
23+
},
24+
});
2725

2826
interface ButtonProps
2927
extends ButtonHTMLAttributes<HTMLButtonElement>,
@@ -37,10 +35,13 @@ export function Button({
3735
...props
3836
}: ButtonProps) {
3937
return (
40-
<button className={cn(buttonVariants({ variant, size }), className)} {...props}>
38+
<button
39+
className={cn(buttonVariants({ variant, size }), className)}
40+
{...props}
41+
>
4142
{children}
4243
</button>
4344
);
4445
}
4546

46-
Button.displayName = "Button";
47+
Button.displayName = "Button";

‎packages/ui/Tabs/Tab.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { cn } from "@/lib/utils";
2+
import {
3+
Tab,
4+
TabGroup,
5+
TabList,
6+
TabListProps,
7+
TabPanel,
8+
TabPanelProps,
9+
TabPanels,
10+
TabProps,
11+
} from "@headlessui/react";
12+
13+
const Tabs = TabGroup;
14+
const TabsPanels = TabPanels;
15+
16+
interface ITabsTriggerList extends TabListProps {
17+
className?: string;
18+
}
19+
const TabsTriggerList = ({
20+
children,
21+
className,
22+
...props
23+
}: ITabsTriggerList) => {
24+
return (
25+
<TabList className={cn("flex flex-row space-x-2", className)} {...props}>
26+
{children}
27+
</TabList>
28+
);
29+
};
30+
31+
interface ITabsTrigger extends TabProps {
32+
className?: string;
33+
}
34+
const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {
35+
return (
36+
<Tab
37+
className={cn(
38+
"px-4 py-1 border-2 border-transparent data-[selected]:border-black data-[selected]:bg-primary-400 data-[selected]:font-semibold focus:outline-none",
39+
className
40+
)}
41+
{...props}
42+
>
43+
{children}
44+
</Tab>
45+
);
46+
};
47+
48+
interface ITabsContent extends TabPanelProps {
49+
className?: string;
50+
}
51+
const TabsContent = ({ children, className, ...props }: ITabsContent) => {
52+
return (
53+
<TabPanel
54+
className={cn("border-2 border-black mt-2 p-4", className)}
55+
{...props}
56+
>
57+
{children}
58+
</TabPanel>
59+
);
60+
};
61+
62+
export { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };

0 commit comments

Comments
 (0)