Skip to content
This repository was archived by the owner on Jun 28, 2026. It is now read-only.

Commit 7f49592

Browse files
tanerengiiintanerengiiin
committed
feat: add preview demos
1 parent 2a98654 commit 7f49592

179 files changed

Lines changed: 5188 additions & 665 deletions

File tree

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: 308 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/showcase/demo/styled/accordion/preview.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { ChevronDown } from '@primeicons/react/chevron-down';
2+
import { Accordion } from '@primereact/ui/accordion';
3+
4+
export default function Preview() {
5+
return (
6+
<Accordion.Root className="max-w-md mx-auto">
7+
<Accordion.Panel value="1">
8+
<Accordion.Header>
9+
<Accordion.Trigger className="flex justify-between items-center w-full">
10+
What is this service about?
11+
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
12+
</Accordion.Trigger>
13+
</Accordion.Header>
14+
<Accordion.Content>
15+
<p className="text-sm">
16+
This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and powerful
17+
analytics.
18+
</p>
19+
</Accordion.Content>
20+
</Accordion.Panel>
21+
<Accordion.Panel value="2">
22+
<Accordion.Header>
23+
<Accordion.Trigger className="flex justify-between items-center w-full">
24+
Is my data secure?
25+
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
26+
</Accordion.Trigger>
27+
</Accordion.Header>
28+
<Accordion.Content>
29+
<p className="text-sm">
30+
Yes. We use end-to-end encryption and follow industry best practices to ensure your data is protected. Your information is
31+
stored on secure servers and regularly backed up.
32+
</p>
33+
</Accordion.Content>
34+
</Accordion.Panel>
35+
<Accordion.Panel value="3">
36+
<Accordion.Header>
37+
<Accordion.Trigger className="flex justify-between items-center w-full">
38+
Can I upgrade or downgrade my plan later?
39+
<ChevronDown className="transition-transform duration-200 [[data-content-open]>&]:rotate-180" />
40+
</Accordion.Trigger>
41+
</Accordion.Header>
42+
<Accordion.Content>
43+
<p className="text-sm">
44+
Absolutely. You can change your subscription plan at any time from your account settings. Changes take effect immediately, and
45+
any billing adjustments are handled automatically.
46+
</p>
47+
</Accordion.Content>
48+
</Accordion.Panel>
49+
</Accordion.Root>
50+
);
51+
}

‎apps/showcase/demo/styled/animateonscroll/preview.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ArrowDown } from '@primeicons/react';
2+
import { ArrowRight } from '@primeicons/react/arrow-right';
3+
import { AnimateOnScroll } from '@primereact/ui/animateonscroll';
4+
import { Button } from '@primereact/ui/button';
5+
6+
export default function Preview() {
7+
return (
8+
<div className="flex flex-col items-center overflow-hidden">
9+
<div className="flex flex-col items-center gap-4">
10+
<div className="text-2xl font-medium">Scroll Down</div>
11+
<div className="animate-bounce h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
12+
<ArrowDown />
13+
</div>
14+
</div>
15+
<div className="h-[45rem]"></div>
16+
<div className="flex flex-col items-center gap-8 w-full">
17+
<AnimateOnScroll
18+
enterClassName="animate-enter fade-in-10 slide-in-from-b-16 animate-duration-1000"
19+
leaveClassName="animate-leave fade-out-0 animate-duration-100"
20+
>
21+
<div className="text-5xl lg:text-[4rem] text-center font-bold max-w-lg lg:max-w-3xl text-surface-900 dark:text-surface-50 ">
22+
Discover real-world design inspiration.
23+
</div>
24+
</AnimateOnScroll>
25+
<AnimateOnScroll
26+
enterClassName="animate-enter fade-in-10 slide-in-from-b-16 animate-duration-1000"
27+
leaveClassName="animate-leave fade-out-0 animate-duration-100"
28+
>
29+
<div className="max-w-md lg:max-w-md text-base lg:text-lg text-center text-muted-color">
30+
Featuring over 400.000 screens and 1,000 iOS, Android & Web apps — New content weekly.
31+
</div>
32+
</AnimateOnScroll>
33+
<AnimateOnScroll
34+
enterClassName="animate-enter fade-in-10 slide-in-from-b-16 animate-duration-1000"
35+
leaveClassName="animate-leave fade-out-0 animate-duration-100"
36+
>
37+
<div className="flex items-center justify-center gap-4 font-semibold">
38+
<Button size="large" rounded>
39+
Join for free
40+
</Button>
41+
<Button size="large" variant="outlined" rounded severity="primary">
42+
See our plans
43+
<span className="bg-surface-200 dark:bg-surface-800 size-6 inline-flex items-center justify-center rounded-full">
44+
<ArrowRight className="font-bold! text-sm!"></ArrowRight>
45+
</span>
46+
</Button>
47+
</div>
48+
</AnimateOnScroll>
49+
</div>
50+
<div className="h-[15rem]"></div>
51+
</div>
52+
);
53+
}

‎apps/showcase/demo/styled/autocomplete/preview.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use client';
2+
import { AutoComplete, type AutoCompleteCompleteEvent } from '@primereact/ui/autocomplete';
3+
import { InputText } from '@primereact/ui/inputtext';
4+
import { Label } from '@primereact/ui/label';
5+
import * as React from 'react';
6+
7+
export default function Preview() {
8+
const [filtered, setFiltered] = React.useState<string[]>([]);
9+
10+
const search = (event: AutoCompleteCompleteEvent) => {
11+
const query = event.query.toLowerCase();
12+
13+
setFiltered(query ? options.filter((item) => item.toLowerCase().includes(query)) : [...options]);
14+
};
15+
16+
return (
17+
<div className="flex justify-center">
18+
<div className="flex flex-col">
19+
<Label>Search tutorials</Label>
20+
<AutoComplete.Root options={filtered} onComplete={search} className="w-full md:w-72 mt-2">
21+
<AutoComplete.Input as={InputText} placeholder="Search..." className="w-full" />
22+
<AutoComplete.Portal>
23+
<AutoComplete.Positioner>
24+
<AutoComplete.Popup>
25+
<AutoComplete.List style={{ maxHeight: '14rem' }}>
26+
{filtered.map((item, index) => (
27+
<AutoComplete.Option key={item} index={index} uKey={item}>
28+
{item}
29+
</AutoComplete.Option>
30+
))}
31+
<AutoComplete.Empty className="text-sm">No results found</AutoComplete.Empty>
32+
</AutoComplete.List>
33+
</AutoComplete.Popup>
34+
</AutoComplete.Positioner>
35+
</AutoComplete.Portal>
36+
</AutoComplete.Root>
37+
<small className="text-surface-500 mt-1.5 opacity-75">
38+
Type <em className="underline">react</em> to see suggestions
39+
</small>
40+
</div>
41+
</div>
42+
);
43+
}
44+
45+
const options: string[] = [
46+
'responsive design fundamentals',
47+
'redux toolkit crash course',
48+
'real-time chat app tutorial',
49+
'reading json files in node',
50+
'react hooks tutorial',
51+
'react server components explained',
52+
'react vs vue 2024',
53+
'react native crash course',
54+
'react 19 new features',
55+
'react context api best practices',
56+
'react testing library guide',
57+
'react router v7 tutorial',
58+
'react performance optimization',
59+
'react suspense and lazy loading',
60+
'react state management comparison',
61+
'react form validation',
62+
'react design patterns',
63+
'react authentication tutorial',
64+
'react with typescript beginner',
65+
'react animation libraries',
66+
'react deploy to production'
67+
];

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ 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>
1310
</div>
1411
);
1512
}

‎apps/showcase/demo/styled/avatar/preview.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Avatar } from '@primereact/ui/avatar';
2+
3+
export default function Preview() {
4+
return (
5+
<div className="flex items-center justify-center gap-4">
6+
<Avatar.Root size="large" shape="circle">
7+
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
8+
<Avatar.Fallback>A</Avatar.Fallback>
9+
</Avatar.Root>
10+
<Avatar.Root size="large" shape="circle">
11+
<Avatar.Fallback>A</Avatar.Fallback>
12+
</Avatar.Root>
13+
</div>
14+
);
15+
}

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

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

43
export default function BasicDemo() {
54
return (
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>
5+
<div className="flex justify-center">
6+
<Badge>Badge</Badge>
337
</div>
348
);
359
}

‎apps/showcase/demo/styled/badge/preview.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Bell, Check, Clock, ExclamationTriangle, Lock, StarFill, Tag, TimesCircle } from '@primeicons/react';
2+
import { Badge } from '@primereact/ui/badge';
3+
4+
export default function Preview() {
5+
return (
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>
33+
</div>
34+
);
35+
}

‎apps/showcase/demo/styled/breadcrumb/preview.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Bolt } from '@primeicons/react/bolt';
2+
import { ChevronRight } from '@primeicons/react/chevron-right';
3+
import { EllipsisH } from '@primeicons/react/ellipsis-h';
4+
import { Home } from '@primeicons/react/home';
5+
import { Breadcrumb } from '@primereact/ui/breadcrumb';
6+
7+
export default function Preview() {
8+
return (
9+
<div className="flex justify-center">
10+
<Breadcrumb.Root>
11+
<Breadcrumb.List>
12+
<Breadcrumb.Item>
13+
<Breadcrumb.Link href="/">
14+
<Home />
15+
</Breadcrumb.Link>
16+
</Breadcrumb.Item>
17+
<Breadcrumb.Separator>
18+
<ChevronRight />
19+
</Breadcrumb.Separator>
20+
<Breadcrumb.Separator>
21+
<EllipsisH />
22+
</Breadcrumb.Separator>
23+
<Breadcrumb.Separator>
24+
<ChevronRight />
25+
</Breadcrumb.Separator>
26+
<Breadcrumb.Item>
27+
<Breadcrumb.Link href="#">Products</Breadcrumb.Link>
28+
</Breadcrumb.Item>
29+
<Breadcrumb.Separator>
30+
<ChevronRight />
31+
</Breadcrumb.Separator>
32+
<Breadcrumb.Item>
33+
<Breadcrumb.Link href="#">
34+
<Bolt /> Electronics
35+
</Breadcrumb.Link>
36+
</Breadcrumb.Item>
37+
<Breadcrumb.Separator>
38+
<ChevronRight />
39+
</Breadcrumb.Separator>
40+
<Breadcrumb.Item>
41+
<Breadcrumb.Link href="#">Laptops</Breadcrumb.Link>
42+
</Breadcrumb.Item>
43+
<Breadcrumb.Separator>
44+
<ChevronRight />
45+
</Breadcrumb.Separator>
46+
<Breadcrumb.Item>
47+
<Breadcrumb.Current>Dell</Breadcrumb.Current>
48+
</Breadcrumb.Item>
49+
</Breadcrumb.List>
50+
</Breadcrumb.Root>
51+
</div>
52+
);
53+
}

‎apps/showcase/demo/styled/button/preview.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Button } from '@primereact/ui/button';
2+
3+
export default function Preview() {
4+
return (
5+
<div className="flex justify-center">
6+
<Button>Submit</Button>
7+
</div>
8+
);
9+
}

0 commit comments

Comments
 (0)