Skip to content

Commit 58a26c8

Browse files
tanerengiiintanerengiiin
committed
refactor: update usage demos
1 parent 8ff88f2 commit 58a26c8

25 files changed

Lines changed: 411 additions & 154 deletions

File tree

‎apps/showcase/app/(app)/(landing)/components/cards/music-player.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,6 @@ const albums = [
2424
{ title: 'Ivory', artist: 'Soft Landing', img: 'https://images.unsplash.com/photo-1531777992189-ad52457fbe93?w=200&h=200&fit=crop&auto=format' }
2525
];
2626

27-
const recentSongs = [
28-
{ title: 'Dissolve', artist: 'Phantom Echo', duration: '3:21', img: albums[1].img },
29-
{ title: 'Still Life', artist: 'Glass Animals', duration: '4:05', img: albums[2].img },
30-
{ title: 'Bloom', artist: 'Petal Storm', duration: '2:58', img: albums[3].img }
31-
];
32-
3327
export function MusicPlayerCard({ className, ...props }: React.ComponentProps<'div'>) {
3428
const [progress, setProgress] = React.useState(84);
3529
const currentTime = formatTime(progress);

‎apps/showcase/demo/styled/avatar/basic-demo.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export default function BasicDemo() {
77
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
88
<Avatar.Fallback>A</Avatar.Fallback>
99
</Avatar.Root>
10+
<Avatar.Root size="large" shape="circle">
11+
<Avatar.Fallback>A</Avatar.Fallback>
12+
</Avatar.Root>
1013
</div>
1114
);
1215
}

‎apps/showcase/demo/styled/badge/basic-demo.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,35 @@
1+
import { Bell, Check, Clock, ExclamationTriangle, Lock, StarFill, Tag, TimesCircle } from '@primeicons/react';
12
import { Badge } from '@primereact/ui/badge';
23

34
export default function BasicDemo() {
45
return (
5-
<div className="flex justify-center">
6-
<Badge>Badge</Badge>
6+
<div className="flex flex-wrap items-center justify-center gap-2 max-w-2xs mx-auto">
7+
<Badge severity="success">
8+
<Check className="size-2.75! mr-1" /> Approved
9+
</Badge>
10+
<Badge severity="danger">
11+
<TimesCircle className="size-2.75! mr-1" /> Rejected
12+
</Badge>
13+
<Badge severity="warn">
14+
<ExclamationTriangle className="size-2.75! mr-1" /> Warning
15+
</Badge>
16+
<Badge severity="info">
17+
<Clock className="size-2.75! mr-1" /> Pending
18+
</Badge>
19+
<Badge severity="secondary">
20+
<Tag className="size-2.75! mr-1" /> Draft
21+
</Badge>
22+
<Badge>
23+
<StarFill className="size-2.75! mr-1" /> Featured
24+
</Badge>
25+
<Badge severity="info">
26+
<Bell className="size-2.75! mr-1" /> 3 New
27+
</Badge>
28+
<Badge severity="success">Online</Badge>
29+
<Badge severity="secondary">
30+
<Lock className="size-2.75! mr-1" /> Private
31+
</Badge>
32+
<Badge severity="danger">Security issue</Badge>
733
</div>
834
);
935
}

‎apps/showcase/demo/styled/carousel/basic-demo.tsx‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,65 @@
1-
import { Carousel } from '@primereact/ui/carousel';
21
import { ChevronLeft } from '@primeicons/react/chevron-left';
32
import { ChevronRight } from '@primeicons/react/chevron-right';
3+
import { Button } from '@primereact/ui/button';
4+
import { Carousel } from '@primereact/ui/carousel';
5+
6+
const albums = [
7+
{
8+
title: 'Velvet Haze',
9+
artist: 'Aurora Skies',
10+
img: 'https://plus.unsplash.com/premium_photo-1721310985165-4e6e63d5e7a1?w=200&h=200&fit=crop&auto=format'
11+
},
12+
{
13+
title: 'Dissolve',
14+
artist: 'Phantom Echo',
15+
img: 'https://images.unsplash.com/photo-1711054824441-064a99073a0b?w=200&h=200&fit=crop&auto=format'
16+
},
17+
{
18+
title: 'Still Life',
19+
artist: 'Glass Animals',
20+
img: 'https://images.unsplash.com/photo-1651443039959-582bbea6be6a?w=200&h=200&fit=crop&auto=format'
21+
},
22+
{
23+
title: 'Bloom',
24+
artist: 'Petal Storm',
25+
img: 'https://plus.unsplash.com/premium_photo-1748180936767-e1ce9b2374fa?w=200&h=200&fit=crop&auto=format'
26+
},
27+
{
28+
title: 'Refraction',
29+
artist: 'Prism Collective',
30+
img: 'https://images.unsplash.com/photo-1651443146979-4cf9a27dcade?w=200&h=200&fit=crop&auto=format'
31+
},
32+
{ title: 'Ivory', artist: 'Soft Landing', img: 'https://images.unsplash.com/photo-1531777992189-ad52457fbe93?w=200&h=200&fit=crop&auto=format' }
33+
];
434

535
function BasicDemo() {
636
return (
7-
<div className="mt-8 mb-16">
8-
<Carousel.Root className="max-w-xl mx-auto" align="center">
9-
<Carousel.Content className="h-[240px]">
10-
{Array.from({ length: 5 }).map((_, i) => (
11-
<Carousel.Item key={i}>
12-
<div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
13-
<span>{i + 1}</span>
14-
</div>
15-
</Carousel.Item>
16-
))}
17-
</Carousel.Content>
18-
<div className="flex mt-4 gap-4">
19-
<Carousel.Indicators />
20-
<div className="flex items-center justify-end gap-2 flex-1">
21-
<Carousel.Prev className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
22-
<ChevronLeft className="text-lg"></ChevronLeft>
23-
</Carousel.Prev>
24-
<Carousel.Next className="w-9 h-9 flex items-center justify-center rounded-full border border-surface bg-surface-0 dark:bg-surface-800 text-surface-500 dark:text-surface-400 hover:opacity-75 cursor-pointer transition-opacity">
25-
<ChevronRight className="text-lg"></ChevronRight>
26-
</Carousel.Next>
27-
</div>
37+
<Carousel.Root className="max-w-sm mx-auto" slidesPerPage={2.45} spacing={20}>
38+
<div className="flex items-center justify-between mb-4">
39+
<div className="font-bold ">Last Played</div>
40+
<div className="flex items-center gap-2">
41+
<Carousel.Prev as={Button} size="small" severity="secondary" iconOnly>
42+
<ChevronLeft />
43+
</Carousel.Prev>
44+
<Carousel.Next as={Button} size="small" severity="secondary" iconOnly>
45+
<ChevronRight />
46+
</Carousel.Next>
2847
</div>
29-
</Carousel.Root>
30-
</div>
48+
</div>
49+
<Carousel.Content>
50+
{albums.map((album) => (
51+
<Carousel.Item key={album.title} className="w-full relative">
52+
<div className="relative">
53+
<img draggable={false} src={album.img} alt={album.title} className="rounded-xl object-cover w-full aspect-square" />
54+
</div>
55+
<div className="mt-2">
56+
<div className="font-semibold">{album.title}</div>
57+
<div className="text-sm text-muted-color">{album.artist}</div>
58+
</div>
59+
</Carousel.Item>
60+
))}
61+
</Carousel.Content>
62+
</Carousel.Root>
3163
);
3264
}
3365

‎apps/showcase/demo/styled/checkboxgroup/basic-demo.tsx‎

Lines changed: 34 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,49 @@
11
'use client';
2+
import { Check } from '@primeicons/react/check';
23
import { Checkbox } from '@primereact/ui/checkbox';
34
import { CheckboxGroup, type CheckboxGroupChangeEvent } from '@primereact/ui/checkboxgroup';
45
import { Label } from '@primereact/ui/label';
56
import React from 'react';
6-
import { Check } from '@primeicons/react/check';
7+
8+
const options = [
9+
{ label: 'Gemini', value: 'gemini' },
10+
{ label: 'Claude', value: 'claude' },
11+
{ label: 'ChatGPT', value: 'chatgpt' },
12+
{ label: 'Deepseek', value: 'deepseek' }
13+
];
714

815
export default function BasicDemo() {
916
const [value, setValue] = React.useState<string[]>();
1017

1118
return (
1219
<div className="flex items-center justify-center">
13-
<CheckboxGroup
14-
defaultValue={['Cheese']}
15-
value={value}
16-
onValueChange={(e: CheckboxGroupChangeEvent) => setValue(e.value as string[])}
17-
className="gap-4 flex-wrap"
18-
>
19-
<div className="flex items-center gap-2">
20-
<Checkbox.Root inputId="cheese" value="Cheese">
21-
<Checkbox.Box>
22-
<Checkbox.Indicator match="checked">
23-
<Check />
24-
</Checkbox.Indicator>
25-
</Checkbox.Box>
26-
</Checkbox.Root>
27-
<Label htmlFor="cheese">Cheese</Label>
28-
</div>
29-
<div className="flex items-center gap-2">
30-
<Checkbox.Root inputId="mushroom" value="Mushroom">
31-
<Checkbox.Box>
32-
<Checkbox.Indicator match="checked">
33-
<Check />
34-
</Checkbox.Indicator>
35-
</Checkbox.Box>
36-
</Checkbox.Root>
37-
<Label htmlFor="mushroom">Mushroom</Label>
38-
</div>
39-
<div className="flex items-center gap-2">
40-
<Checkbox.Root inputId="pepper" value="Pepper">
41-
<Checkbox.Box>
42-
<Checkbox.Indicator match="checked">
43-
<Check />
44-
</Checkbox.Indicator>
45-
</Checkbox.Box>
46-
</Checkbox.Root>
47-
<Label htmlFor="pepper">Pepper</Label>
48-
</div>
49-
<div className="flex items-center gap-2">
50-
<Checkbox.Root inputId="onion" value="Onion">
51-
<Checkbox.Box>
52-
<Checkbox.Indicator match="checked">
53-
<Check />
54-
</Checkbox.Indicator>
55-
</Checkbox.Box>
56-
</Checkbox.Root>
57-
<Label htmlFor="onion">Onion</Label>
20+
<div className="p-1 rounded-2xl bg-surface-100 dark:bg-surface-900 max-w-3xs">
21+
<div className="px-2.5 pt-1 pb-1.5 text-sm font-semibold text-surface-500">Survey</div>
22+
<div className="p-4 rounded-xl bg-surface-0 dark:bg-surface-950">
23+
<div className="mb-3 text-color">Which LLM provider should we integrate next?</div>
24+
<CheckboxGroup
25+
defaultValue={['Cheese']}
26+
value={value}
27+
onValueChange={(e: CheckboxGroupChangeEvent) => setValue(e.value as string[])}
28+
className="flex-col gap-2"
29+
>
30+
{options.map((option) => (
31+
<div key={option.value} className="flex items-center gap-3">
32+
<Checkbox.Root inputId={option.value} value={option.value}>
33+
<Checkbox.Box>
34+
<Checkbox.Indicator match="checked">
35+
<Check />
36+
</Checkbox.Indicator>
37+
</Checkbox.Box>
38+
</Checkbox.Root>
39+
<Label htmlFor={option.value} className="text-surface-500 dark:text-surface-400">
40+
{option.label}
41+
</Label>
42+
</div>
43+
))}
44+
</CheckboxGroup>
5845
</div>
59-
</CheckboxGroup>
46+
</div>
6047
</div>
6148
);
6249
}

‎apps/showcase/demo/styled/fieldset/basic-demo.tsx‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,29 @@ import { Fieldset } from '@primereact/ui/fieldset';
22

33
export default function BasicDemo() {
44
return (
5-
<div>
6-
<Fieldset.Root>
7-
<Fieldset.Legend>
8-
<Fieldset.Title>Legend</Fieldset.Title>
9-
</Fieldset.Legend>
10-
<Fieldset.Content>
11-
<p className="text-sm">
12-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
13-
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
14-
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
15-
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
16-
</p>
17-
</Fieldset.Content>
18-
</Fieldset.Root>
19-
</div>
5+
<Fieldset.Root className="max-w-xs mx-auto">
6+
<Fieldset.Legend>
7+
<Fieldset.Title>Shipping Address</Fieldset.Title>
8+
</Fieldset.Legend>
9+
<Fieldset.Content>
10+
<div className="flex flex-col gap-6 text-sm p-2">
11+
<div className="flex gap-8">
12+
<div>
13+
<div className="text-color font-medium">Name</div>
14+
<div className="text-muted-color">Jane Cooper</div>
15+
</div>
16+
<div>
17+
<div className="text-color font-medium">Phone</div>
18+
<div className="text-muted-color ">(415) 555-0132</div>
19+
</div>
20+
</div>
21+
<div>
22+
<div className="text-color font-medium">Address</div>
23+
<div className="text-muted-color">1234 Elm Street, Apt 5B</div>
24+
<div className="text-muted-color">San Francisco, CA 94102</div>
25+
</div>
26+
</div>
27+
</Fieldset.Content>
28+
</Fieldset.Root>
2029
);
2130
}

‎apps/showcase/demo/styled/inputgroup/basic-demo.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { User } from '@primeicons/react/user';
12
import { InputGroup } from '@primereact/ui/inputgroup';
23
import { InputText } from '@primereact/ui/inputtext';
3-
import { User } from '@primeicons/react/user';
44

55
export default function BasicDemo() {
66
return (
@@ -13,8 +13,9 @@ export default function BasicDemo() {
1313
</InputGroup.Root>
1414

1515
<InputGroup.Root>
16-
<InputGroup.Addon>www</InputGroup.Addon>
17-
<InputText placeholder="Website" />
16+
<InputGroup.Addon>https://</InputGroup.Addon>
17+
<InputText placeholder="website" />
18+
<InputGroup.Addon>.com</InputGroup.Addon>
1819
</InputGroup.Root>
1920
</div>
2021
);

‎apps/showcase/demo/styled/inputotp/basic-demo.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,36 @@
1+
import { Button } from '@primereact/ui/button';
12
import { InputOtp } from '@primereact/ui/inputotp';
23

34
export default function BasicDemo() {
45
return (
5-
<div className="flex justify-center">
6-
<InputOtp.Root>
6+
<div className="flex flex-col gap-10 justify-between h-full max-w-xs mx-auto">
7+
<div>
8+
<div className="font-bold text-color text-lg">Check your email for OTP</div>
9+
<div className="text-surface-500 mt-1">Please enter the 6-digit code sent to your email address to reset your password.</div>
10+
</div>
11+
<InputOtp.Root
12+
length={6}
13+
integerOnly
14+
defaultValue="482"
15+
className="w-full *:flex-1 *:aspect-square *:text-2xl **:font-bold my-auto gap-3"
16+
>
717
<InputOtp.Text index={0} />
818
<InputOtp.Text index={1} />
919
<InputOtp.Text index={2} />
1020
<InputOtp.Text index={3} />
21+
<InputOtp.Text index={4} />
22+
<InputOtp.Text index={5} />
1123
</InputOtp.Root>
24+
25+
<div>
26+
<div className="text-sm text-muted-color mb-2">
27+
Didn&apos;t receive code?{' '}
28+
<Button variant="text" className=" text-sm">
29+
Resend
30+
</Button>
31+
</div>
32+
<Button className="w-full">Change password</Button>
33+
</div>
1234
</div>
1335
);
1436
}

‎apps/showcase/demo/styled/metergroup/multiple-demo.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default function MultipleDemo() {
1313

1414
return (
1515
<div>
16+
<h4 className="uppercase font-semibold text-surface-500 tracking-wide text-sm mb-4">Disk usage</h4>
1617
<MeterGroup.Root>
1718
<MeterGroup.Meters>
1819
{values.map((item, index) => (

0 commit comments

Comments
 (0)