Skip to content

Commit cf0d35d

Browse files
tanerengiiintanerengiiin
committed
feat(tailwind): add Panel, Fieldset, Breadcrumb, Card
1 parent 62f57aa commit cf0d35d

49 files changed

Lines changed: 2230 additions & 13 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/__store__/index.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2518,6 +2518,36 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
25182518
'filePath': 'demo/tailwind/badge/size-demo.tsx',
25192519
},
25202520
},
2521+
'breadcrumb': {
2522+
'basic-demo': {
2523+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/basic-demo')),
2524+
'filePath': 'demo/tailwind/breadcrumb/basic-demo.tsx',
2525+
},
2526+
'breadcrumb-pt': {
2527+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/breadcrumb-pt')),
2528+
'filePath': 'demo/tailwind/breadcrumb/breadcrumb-pt.tsx',
2529+
},
2530+
'controlled-demo': {
2531+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/controlled-demo')),
2532+
'filePath': 'demo/tailwind/breadcrumb/controlled-demo.tsx',
2533+
},
2534+
'custom-item-demo': {
2535+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/custom-item-demo')),
2536+
'filePath': 'demo/tailwind/breadcrumb/custom-item-demo.tsx',
2537+
},
2538+
'custom-separator-demo': {
2539+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/custom-separator-demo')),
2540+
'filePath': 'demo/tailwind/breadcrumb/custom-separator-demo.tsx',
2541+
},
2542+
'ellipsis-demo': {
2543+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/ellipsis-demo')),
2544+
'filePath': 'demo/tailwind/breadcrumb/ellipsis-demo.tsx',
2545+
},
2546+
'route-demo': {
2547+
'component': React.lazy(() => import('demo/tailwind/breadcrumb/route-demo')),
2548+
'filePath': 'demo/tailwind/breadcrumb/route-demo.tsx',
2549+
},
2550+
},
25212551
'button': {
25222552
'badge-demo': {
25232553
'component': React.lazy(() => import('demo/tailwind/button/badge-demo')),
@@ -2588,6 +2618,24 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
25882618
'filePath': 'demo/tailwind/button/verify-demo.tsx',
25892619
},
25902620
},
2621+
'card': {
2622+
'advanced-demo': {
2623+
'component': React.lazy(() => import('demo/tailwind/card/advanced-demo')),
2624+
'filePath': 'demo/tailwind/card/advanced-demo.tsx',
2625+
},
2626+
'basic-demo': {
2627+
'component': React.lazy(() => import('demo/tailwind/card/basic-demo')),
2628+
'filePath': 'demo/tailwind/card/basic-demo.tsx',
2629+
},
2630+
'card-pt': {
2631+
'component': React.lazy(() => import('demo/tailwind/card/card-pt')),
2632+
'filePath': 'demo/tailwind/card/card-pt.tsx',
2633+
},
2634+
'with-form-demo': {
2635+
'component': React.lazy(() => import('demo/tailwind/card/with-form-demo')),
2636+
'filePath': 'demo/tailwind/card/with-form-demo.tsx',
2637+
},
2638+
},
25912639
'carousel': {
25922640
'alignment-demo': {
25932641
'component': React.lazy(() => import('demo/tailwind/carousel/alignment-demo')),
@@ -2748,6 +2796,28 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
27482796
'filePath': 'demo/tailwind/divider/vertical-demo.tsx',
27492797
},
27502798
},
2799+
'fieldset': {
2800+
'basic-demo': {
2801+
'component': React.lazy(() => import('demo/tailwind/fieldset/basic-demo')),
2802+
'filePath': 'demo/tailwind/fieldset/basic-demo.tsx',
2803+
},
2804+
'controlled-toggleable-demo': {
2805+
'component': React.lazy(() => import('demo/tailwind/fieldset/controlled-toggleable-demo')),
2806+
'filePath': 'demo/tailwind/fieldset/controlled-toggleable-demo.tsx',
2807+
},
2808+
'fieldset-pt': {
2809+
'component': React.lazy(() => import('demo/tailwind/fieldset/fieldset-pt')),
2810+
'filePath': 'demo/tailwind/fieldset/fieldset-pt.tsx',
2811+
},
2812+
'indicator-demo': {
2813+
'component': React.lazy(() => import('demo/tailwind/fieldset/indicator-demo')),
2814+
'filePath': 'demo/tailwind/fieldset/indicator-demo.tsx',
2815+
},
2816+
'toggleable-demo': {
2817+
'component': React.lazy(() => import('demo/tailwind/fieldset/toggleable-demo')),
2818+
'filePath': 'demo/tailwind/fieldset/toggleable-demo.tsx',
2819+
},
2820+
},
27512821
'inputotp': {
27522822
'basic-demo': {
27532823
'component': React.lazy(() => import('demo/tailwind/inputotp/basic-demo')),
@@ -2838,6 +2908,32 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
28382908
'filePath': 'demo/tailwind/paginator/with-input-demo.tsx',
28392909
},
28402910
},
2911+
'panel': {
2912+
'basic-demo': {
2913+
'component': React.lazy(() => import('demo/tailwind/panel/basic-demo')),
2914+
'filePath': 'demo/tailwind/panel/basic-demo.tsx',
2915+
},
2916+
'indicator-demo': {
2917+
'component': React.lazy(() => import('demo/tailwind/panel/indicator-demo')),
2918+
'filePath': 'demo/tailwind/panel/indicator-demo.tsx',
2919+
},
2920+
'panel-pt': {
2921+
'component': React.lazy(() => import('demo/tailwind/panel/panel-pt')),
2922+
'filePath': 'demo/tailwind/panel/panel-pt.tsx',
2923+
},
2924+
'template-demo': {
2925+
'component': React.lazy(() => import('demo/tailwind/panel/template-demo')),
2926+
'filePath': 'demo/tailwind/panel/template-demo.tsx',
2927+
},
2928+
'toggleable-controlled-demo': {
2929+
'component': React.lazy(() => import('demo/tailwind/panel/toggleable-controlled-demo')),
2930+
'filePath': 'demo/tailwind/panel/toggleable-controlled-demo.tsx',
2931+
},
2932+
'toggleable-demo': {
2933+
'component': React.lazy(() => import('demo/tailwind/panel/toggleable-demo')),
2934+
'filePath': 'demo/tailwind/panel/toggleable-demo.tsx',
2935+
},
2936+
},
28412937
'radiobutton': {
28422938
'basic-demo': {
28432939
'component': React.lazy(() => import('demo/tailwind/radiobutton/basic-demo')),

‎apps/showcase/assets/menu/submenu/menu-tailwind.data.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,30 @@ export const tailwindMenu = [
9191
name: 'Accordion',
9292
href: '/docs/tailwind/components/accordion'
9393
},
94+
{
95+
name: 'Card',
96+
href: '/docs/tailwind/components/card'
97+
},
9498
{
9599
name: 'Divider',
96100
href: '/docs/tailwind/components/divider'
101+
},
102+
{
103+
name: 'Fieldset',
104+
href: '/docs/tailwind/components/fieldset'
105+
},
106+
{
107+
name: 'Panel',
108+
href: '/docs/tailwind/components/panel'
109+
}
110+
]
111+
},
112+
{
113+
name: 'Menu',
114+
children: [
115+
{
116+
name: 'Breadcrumb',
117+
href: '/docs/tailwind/components/breadcrumb'
97118
}
98119
]
99120
},

‎apps/showcase/demo/tailwind/breadcrumb/basic-demo.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
2+
3+
export default function BasicDemo() {
4+
return (
5+
<div className="flex justify-center">
6+
<Breadcrumb>
7+
<BreadcrumbList>
8+
<BreadcrumbItem>
9+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
10+
</BreadcrumbItem>
11+
<BreadcrumbSeparator />
12+
<BreadcrumbItem>
13+
<BreadcrumbLink href="#">Products</BreadcrumbLink>
14+
</BreadcrumbItem>
15+
<BreadcrumbSeparator />
16+
<BreadcrumbItem>
17+
<BreadcrumbLink href="#">Electronics</BreadcrumbLink>
18+
</BreadcrumbItem>
19+
<BreadcrumbSeparator />
20+
<BreadcrumbItem>
21+
<BreadcrumbLink href="#">Laptops</BreadcrumbLink>
22+
</BreadcrumbItem>
23+
<BreadcrumbSeparator />
24+
<BreadcrumbItem>
25+
<BreadcrumbCurrent>Dell</BreadcrumbCurrent>
26+
</BreadcrumbItem>
27+
</BreadcrumbList>
28+
</Breadcrumb>
29+
</div>
30+
);
31+
}

‎apps/showcase/demo/tailwind/breadcrumb/breadcrumb-pt.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
2+
3+
export default function BreadcrumbPTDemo() {
4+
return (
5+
<Breadcrumb>
6+
<BreadcrumbList>
7+
<BreadcrumbItem>
8+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
9+
</BreadcrumbItem>
10+
<BreadcrumbSeparator />
11+
<BreadcrumbItem>
12+
<BreadcrumbLink href="#">Products</BreadcrumbLink>
13+
</BreadcrumbItem>
14+
<BreadcrumbSeparator />
15+
<BreadcrumbItem>
16+
<BreadcrumbLink href="#">Electronics</BreadcrumbLink>
17+
</BreadcrumbItem>
18+
<BreadcrumbSeparator />
19+
<BreadcrumbItem>
20+
<BreadcrumbLink href="#">Laptops</BreadcrumbLink>
21+
</BreadcrumbItem>
22+
<BreadcrumbSeparator />
23+
<BreadcrumbItem>
24+
<BreadcrumbCurrent>Dell XPS 15</BreadcrumbCurrent>
25+
</BreadcrumbItem>
26+
</BreadcrumbList>
27+
</Breadcrumb>
28+
);
29+
}

‎apps/showcase/demo/tailwind/breadcrumb/controlled-demo.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use client';
2+
import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
3+
import * as React from 'react';
4+
5+
export default function ControlledDemo() {
6+
const [currentPage, setCurrentPage] = React.useState('reports');
7+
8+
const pages = [
9+
{ key: 'home', label: 'Home' },
10+
{ key: 'users', label: 'Users' },
11+
{ key: 'documents', label: 'Documents' },
12+
{ key: 'work', label: 'Work' },
13+
{ key: 'reports', label: 'Reports' }
14+
];
15+
16+
return (
17+
<div className="flex justify-center">
18+
<Breadcrumb>
19+
<BreadcrumbList>
20+
{pages.map((page, index) => (
21+
<React.Fragment key={page.key}>
22+
{index > 0 && <BreadcrumbSeparator />}
23+
<BreadcrumbItem>
24+
{currentPage === page.key ? (
25+
<BreadcrumbCurrent>{page.label}</BreadcrumbCurrent>
26+
) : (
27+
<BreadcrumbLink href="#controlled" onClick={() => setCurrentPage(page.key)}>
28+
{page.label}
29+
</BreadcrumbLink>
30+
)}
31+
</BreadcrumbItem>
32+
</React.Fragment>
33+
))}
34+
</BreadcrumbList>
35+
</Breadcrumb>
36+
</div>
37+
);
38+
}

‎apps/showcase/demo/tailwind/breadcrumb/custom-item-demo.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use client';
2+
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
3+
import { Check, ChevronDown } from '@primeicons/react';
4+
import { Badge } from '@primereact/ui/badge';
5+
import { Menu } from '@primereact/ui/menu';
6+
import * as React from 'react';
7+
8+
export default function CustomItemDemo() {
9+
const [selectedBrand, setSelectedBrand] = React.useState('Apple');
10+
11+
const brands = [{ label: 'Apple' }, { label: 'Dell' }, { label: 'HP' }, { label: 'Lenovo' }, { label: 'Asus' }];
12+
13+
return (
14+
<div className="flex justify-center">
15+
<Breadcrumb>
16+
<BreadcrumbList>
17+
<BreadcrumbItem>
18+
<BreadcrumbLink href="#">Home</BreadcrumbLink>
19+
</BreadcrumbItem>
20+
<BreadcrumbSeparator />
21+
<BreadcrumbItem>
22+
<BreadcrumbLink href="#">Products</BreadcrumbLink>
23+
</BreadcrumbItem>
24+
<BreadcrumbSeparator />
25+
<BreadcrumbItem>
26+
<BreadcrumbLink href="#">Electronics</BreadcrumbLink>
27+
</BreadcrumbItem>
28+
<BreadcrumbSeparator />
29+
<BreadcrumbItem>
30+
<BreadcrumbLink href="#">Computers</BreadcrumbLink>
31+
</BreadcrumbItem>
32+
<BreadcrumbSeparator />
33+
<BreadcrumbItem>
34+
<BreadcrumbLink href="#">
35+
Laptops
36+
<Badge shape="circle">5</Badge>
37+
</BreadcrumbLink>
38+
</BreadcrumbItem>
39+
<BreadcrumbSeparator />
40+
<BreadcrumbItem>
41+
<Menu.Root>
42+
<Menu.Trigger variant="text" className="flex items-center gap-2 px-0">
43+
{selectedBrand}
44+
<ChevronDown className="text-xs" />
45+
</Menu.Trigger>
46+
47+
<Menu.Portal>
48+
<Menu.Positioner>
49+
<Menu.Popup>
50+
<Menu.List>
51+
<Menu.Label>Select Brand</Menu.Label>
52+
{brands.map((brand) => (
53+
<Menu.Item
54+
type="checkbox"
55+
key={brand.label}
56+
checked={selectedBrand === brand.label}
57+
onCheckedChange={() => setSelectedBrand(brand.label)}
58+
>
59+
<Menu.Indicator match="checked">
60+
<Check />
61+
</Menu.Indicator>
62+
{brand.label}
63+
</Menu.Item>
64+
))}
65+
</Menu.List>
66+
</Menu.Popup>
67+
</Menu.Positioner>
68+
</Menu.Portal>
69+
</Menu.Root>
70+
</BreadcrumbItem>
71+
</BreadcrumbList>
72+
</Breadcrumb>
73+
</div>
74+
);
75+
}

‎apps/showcase/demo/tailwind/breadcrumb/custom-separator-demo.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
2+
3+
export default function CustomSeparatorDemo() {
4+
return (
5+
<div className="flex justify-center">
6+
<Breadcrumb>
7+
<BreadcrumbList>
8+
<BreadcrumbItem>
9+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
10+
</BreadcrumbItem>
11+
<BreadcrumbSeparator>/</BreadcrumbSeparator>
12+
<BreadcrumbItem>
13+
<BreadcrumbLink href="#">Products</BreadcrumbLink>
14+
</BreadcrumbItem>
15+
<BreadcrumbSeparator>/</BreadcrumbSeparator>
16+
<BreadcrumbItem>
17+
<BreadcrumbLink href="#">Electronics</BreadcrumbLink>
18+
</BreadcrumbItem>
19+
<BreadcrumbSeparator>/</BreadcrumbSeparator>
20+
<BreadcrumbItem>
21+
<BreadcrumbLink href="#">Laptops</BreadcrumbLink>
22+
</BreadcrumbItem>
23+
<BreadcrumbSeparator>/</BreadcrumbSeparator>
24+
<BreadcrumbItem>
25+
<BreadcrumbCurrent>Dell</BreadcrumbCurrent>
26+
</BreadcrumbItem>
27+
</BreadcrumbList>
28+
</Breadcrumb>
29+
</div>
30+
);
31+
}

‎apps/showcase/demo/tailwind/breadcrumb/ellipsis-demo.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Breadcrumb, BreadcrumbCurrent, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
2+
3+
export default function EllipsisDemo() {
4+
return (
5+
<div className="flex justify-center">
6+
<Breadcrumb>
7+
<BreadcrumbList>
8+
<BreadcrumbItem>
9+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
10+
</BreadcrumbItem>
11+
<BreadcrumbSeparator />
12+
<BreadcrumbEllipsis />
13+
<BreadcrumbSeparator />
14+
<BreadcrumbItem>
15+
<BreadcrumbLink href="#">Electronics</BreadcrumbLink>
16+
</BreadcrumbItem>
17+
<BreadcrumbSeparator />
18+
<BreadcrumbItem>
19+
<BreadcrumbLink href="#">Laptops</BreadcrumbLink>
20+
</BreadcrumbItem>
21+
<BreadcrumbSeparator />
22+
<BreadcrumbItem>
23+
<BreadcrumbCurrent>Dell</BreadcrumbCurrent>
24+
</BreadcrumbItem>
25+
</BreadcrumbList>
26+
</Breadcrumb>
27+
</div>
28+
);
29+
}

0 commit comments

Comments
 (0)