Skip to content

Commit 225e2dc

Browse files
tanerengiiintanerengiiin
committed
feat(tailwind): add metergroup and dataview components
1 parent 266cda9 commit 225e2dc

32 files changed

Lines changed: 1755 additions & 15 deletions

File tree

‎apps/showcase/__store__/index.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4084,6 +4084,36 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
40844084
'filePath': 'demo/tailwind/compare/vertical-demo.tsx',
40854085
},
40864086
},
4087+
'dataview': {
4088+
'basic-demo': {
4089+
'component': React.lazy(() => import('demo/tailwind/dataview/basic-demo')),
4090+
'filePath': 'demo/tailwind/dataview/basic-demo.tsx',
4091+
},
4092+
'dataview-pt': {
4093+
'component': React.lazy(() => import('demo/tailwind/dataview/dataview-pt')),
4094+
'filePath': 'demo/tailwind/dataview/dataview-pt.tsx',
4095+
},
4096+
'layout-demo': {
4097+
'component': React.lazy(() => import('demo/tailwind/dataview/layout-demo')),
4098+
'filePath': 'demo/tailwind/dataview/layout-demo.tsx',
4099+
},
4100+
'loading-demo': {
4101+
'component': React.lazy(() => import('demo/tailwind/dataview/loading-demo')),
4102+
'filePath': 'demo/tailwind/dataview/loading-demo.tsx',
4103+
},
4104+
'pagination-demo': {
4105+
'component': React.lazy(() => import('demo/tailwind/dataview/pagination-demo')),
4106+
'filePath': 'demo/tailwind/dataview/pagination-demo.tsx',
4107+
},
4108+
'preview': {
4109+
'component': React.lazy(() => import('demo/tailwind/dataview/preview')),
4110+
'filePath': 'demo/tailwind/dataview/preview.tsx',
4111+
},
4112+
'sort-demo': {
4113+
'component': React.lazy(() => import('demo/tailwind/dataview/sort-demo')),
4114+
'filePath': 'demo/tailwind/dataview/sort-demo.tsx',
4115+
},
4116+
},
40874117
'dialog': {
40884118
'basic-demo': {
40894119
'component': React.lazy(() => import('demo/tailwind/dialog/basic-demo')),
@@ -4578,6 +4608,44 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
45784608
'filePath': 'demo/tailwind/message/variant-demo.tsx',
45794609
},
45804610
},
4611+
'metergroup': {
4612+
'basic-demo': {
4613+
'component': React.lazy(() => import('demo/tailwind/metergroup/basic-demo')),
4614+
'filePath': 'demo/tailwind/metergroup/basic-demo.tsx',
4615+
},
4616+
'color-demo': {
4617+
'component': React.lazy(() => import('demo/tailwind/metergroup/color-demo')),
4618+
'filePath': 'demo/tailwind/metergroup/color-demo.tsx',
4619+
},
4620+
'icon-demo': {
4621+
'component': React.lazy(() => import('demo/tailwind/metergroup/icon-demo')),
4622+
'filePath': 'demo/tailwind/metergroup/icon-demo.tsx',
4623+
},
4624+
'label-demo': {
4625+
'component': React.lazy(() => import('demo/tailwind/metergroup/label-demo')),
4626+
'filePath': 'demo/tailwind/metergroup/label-demo.tsx',
4627+
},
4628+
'minmax-demo': {
4629+
'component': React.lazy(() => import('demo/tailwind/metergroup/minmax-demo')),
4630+
'filePath': 'demo/tailwind/metergroup/minmax-demo.tsx',
4631+
},
4632+
'multiple-demo': {
4633+
'component': React.lazy(() => import('demo/tailwind/metergroup/multiple-demo')),
4634+
'filePath': 'demo/tailwind/metergroup/multiple-demo.tsx',
4635+
},
4636+
'preview': {
4637+
'component': React.lazy(() => import('demo/tailwind/metergroup/preview')),
4638+
'filePath': 'demo/tailwind/metergroup/preview.tsx',
4639+
},
4640+
'template-demo': {
4641+
'component': React.lazy(() => import('demo/tailwind/metergroup/template-demo')),
4642+
'filePath': 'demo/tailwind/metergroup/template-demo.tsx',
4643+
},
4644+
'vertical-demo': {
4645+
'component': React.lazy(() => import('demo/tailwind/metergroup/vertical-demo')),
4646+
'filePath': 'demo/tailwind/metergroup/vertical-demo.tsx',
4647+
},
4648+
},
45814649
'paginator': {
45824650
'basic-demo': {
45834651
'component': React.lazy(() => import('demo/tailwind/paginator/basic-demo')),

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

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
'use client';
2+
import { Button } from '@/components/ui/button';
3+
import { DataView, DataViewContent } from '@/components/ui/dataview';
4+
import { Tag } from '@/components/ui/tag';
5+
import { ProductService } from '@/shared/services/product.service';
6+
import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
7+
import Image from 'next/image';
8+
import * as React from 'react';
9+
10+
interface Product {
11+
id: string;
12+
code: string;
13+
name: string;
14+
description: string;
15+
image: string;
16+
price: number;
17+
category: string;
18+
quantity: number;
19+
inventoryStatus: string;
20+
rating: number;
21+
}
22+
23+
export default function BasicDemo() {
24+
const [products, setProducts] = React.useState<Product[]>([]);
25+
26+
React.useEffect(() => {
27+
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
28+
}, []);
29+
30+
const getSeverity = (product: Product) => {
31+
switch (product.inventoryStatus) {
32+
case 'INSTOCK':
33+
return 'success';
34+
35+
case 'LOWSTOCK':
36+
return 'warn';
37+
38+
case 'OUTOFSTOCK':
39+
return 'danger';
40+
41+
default:
42+
return undefined;
43+
}
44+
};
45+
46+
return (
47+
<div>
48+
<DataView>
49+
<DataViewContent>
50+
<div className="flex flex-col">
51+
{products.map((product, index) => (
52+
<div
53+
key={index}
54+
className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
55+
>
56+
<div className="md:w-40 relative">
57+
<Image
58+
className="mx-auto rounded w-full"
59+
src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
60+
alt={product.name}
61+
width={160}
62+
height={160}
63+
/>
64+
<div className="absolute bg-black/70 rounded-border" style={{ left: '4px', top: '4px' }}>
65+
<Tag severity={getSeverity(product)}>{product.inventoryStatus}</Tag>
66+
</div>
67+
</div>
68+
<div className="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
69+
<div className="flex flex-row md:flex-col justify-between items-start gap-2">
70+
<div>
71+
<span className="font-medium text-surface-500 dark:text-surface-400 text-sm">{product.category}</span>
72+
<div className="text-lg font-medium mt-2">{product.name}</div>
73+
</div>
74+
<div className="bg-surface-100 p-1" style={{ borderRadius: '30px' }}>
75+
<div
76+
className="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
77+
style={{
78+
borderRadius: '30px',
79+
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)'
80+
}}
81+
>
82+
<span className="text-surface-900 font-medium text-sm">{product.rating}</span>
83+
<StarFill className="text-yellow-500"></StarFill>
84+
</div>
85+
</div>
86+
</div>
87+
<div className="flex flex-col md:items-end gap-8">
88+
<span className="text-xl font-semibold">${product.price}</span>
89+
<div className="flex flex-row-reverse md:flex-row gap-2">
90+
<Button variant="outlined">
91+
<Heart></Heart>
92+
</Button>
93+
<Button
94+
disabled={product.inventoryStatus === 'OUTOFSTOCK'}
95+
className="flex-auto md:flex-initial whitespace-nowrap"
96+
>
97+
<ShoppingCart></ShoppingCart>
98+
Buy Now
99+
</Button>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
))}
105+
</div>
106+
</DataViewContent>
107+
</DataView>
108+
</div>
109+
);
110+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
'use client';
2+
import { ProductService } from '@/shared/services/product.service';
3+
import { Button } from '@/components/ui/button';
4+
import { DataView, DataViewContent } from '@/components/ui/dataview';
5+
import * as React from 'react';
6+
import { Heart } from '@primeicons/react/heart';
7+
import { ShoppingCart } from '@primeicons/react/shopping-cart';
8+
import { StarFill } from '@primeicons/react/star-fill';
9+
10+
interface Product {
11+
id: string;
12+
code: string;
13+
name: string;
14+
description: string;
15+
image: string;
16+
price: number;
17+
category: string;
18+
quantity: number;
19+
inventoryStatus: string;
20+
rating: number;
21+
}
22+
23+
export default function DataViewPTDemo() {
24+
const [products, setProducts] = React.useState<Product[]>([]);
25+
26+
React.useEffect(() => {
27+
ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 3)));
28+
}, []);
29+
30+
return (
31+
<DataView>
32+
<DataViewContent>
33+
<div className="flex flex-col">
34+
{products.map((product, index) => (
35+
<div
36+
key={index}
37+
className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
38+
>
39+
<div className="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
40+
<div className="flex flex-row md:flex-col justify-between items-start gap-2">
41+
<div>
42+
<span className="font-medium text-surface-500 dark:text-surface-400 text-sm">{product.category}</span>
43+
<div className="text-lg font-medium mt-2">{product.name}</div>
44+
</div>
45+
<div className="bg-surface-100 p-1" style={{ borderRadius: '30px' }}>
46+
<div
47+
className="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
48+
style={{
49+
borderRadius: '30px',
50+
boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)'
51+
}}
52+
>
53+
<span className="text-surface-900 font-medium text-sm">{product.rating}</span>
54+
<StarFill className="text-yellow-500"></StarFill>
55+
</div>
56+
</div>
57+
</div>
58+
<div className="flex flex-col md:items-end gap-8">
59+
<span className="text-xl font-semibold">${product.price}</span>
60+
<div className="flex flex-row-reverse md:flex-row gap-2">
61+
<Button variant="outlined">
62+
<Heart></Heart>
63+
</Button>
64+
<Button
65+
disabled={product.inventoryStatus === 'OUTOFSTOCK'}
66+
className="flex-auto md:flex-initial whitespace-nowrap"
67+
>
68+
<ShoppingCart></ShoppingCart>
69+
Buy Now
70+
</Button>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
))}
76+
</div>
77+
</DataViewContent>
78+
</DataView>
79+
);
80+
}

0 commit comments

Comments
 (0)