Skip to content

Commit a8e5b74

Browse files
debabindebabin
committed
main 🧊 new demos
1 parent 063ad60 commit a8e5b74

8 files changed

Lines changed: 151 additions & 115 deletions

File tree

‎packages/core/src/hooks/useBattery/useBattery.demo.tsx‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ const Demo = () => {
3838
if (battery.value.loading) {
3939
return (
4040
<section className='flex justify-center'>
41-
<div className='flex h-96 w-76 items-center justify-center rounded-4xl border'>
41+
<div className='relative flex h-[520px] w-76 items-center justify-center rounded-4xl border pt-12'>
42+
<div className='bg-border absolute top-3 left-1/2 h-5 w-18 -translate-x-1/2 rounded-full' />
4243
<Loader2Icon className='size-5 animate-spin' />
4344
</div>
4445
</section>
@@ -51,39 +52,28 @@ const Demo = () => {
5152

5253
return (
5354
<section className='flex justify-center'>
54-
<div className='flex w-76 flex-col gap-7 rounded-4xl border px-6 pt-4 pb-8'>
55-
<div className='mb-2 flex items-center justify-between'>
56-
<div className='w-12' />
55+
<div className='relative flex h-[430px] w-70 flex-col gap-7 rounded-4xl border px-6 pt-10 pb-8'>
56+
<div className='bg-border absolute top-3 left-1/2 h-5 w-18 -translate-x-1/2 rounded-full' />
5757

58-
<div className='bg-muted h-1 w-16 rounded-full' />
58+
<div className='flex h-full flex-col gap-6 pt-6'>
59+
<div className='flex flex-col items-center gap-2'>
60+
<Icon className={cn('ml-2 size-30', lowBattery ? 'text-red-500' : 'text-foreground')} />
5961

60-
<div
61-
className={cn(
62-
'flex items-center justify-end gap-1 text-xs',
63-
lowBattery ? 'text-red-500' : 'text-foreground'
64-
)}
65-
>
66-
<span>{level}%</span>
67-
<Icon className='size-5' />
62+
<div className='flex flex-col items-center gap-1'>
63+
<div className='text-5xl font-semibold tracking-tight'>{level}%</div>
64+
<span className='text-muted-foreground text-xs tracking-wider uppercase'>
65+
{battery.value.charging ? 'Charging' : 'Battery'}
66+
</span>
67+
</div>
6868
</div>
69-
</div>
70-
71-
<div className='flex flex-col gap-6'>
72-
<div className='flex flex-col gap-2'>
73-
<h2>Feedback</h2>
7469

75-
<p className='text-xs'>
70+
<div className='mt-auto flex flex-col gap-2'>
71+
<p className='text-muted-foreground text-center text-xs'>
7672
Battery has a lot of information, you can use it to get the battery level, charging
7773
status <code>{battery.value.charging ? 'charging' : 'discharging'}</code>, discharging
7874
time <code>{battery.value.dischargingTime}</code> and more.
7975
</p>
8076
</div>
81-
82-
<form className='flex flex-col gap-4'>
83-
<textarea placeholder='Tell us what can be improved...' rows={4} />
84-
85-
<button type='button'>Send feedback</button>
86-
</form>
8777
</div>
8878
</div>
8979
</section>

‎packages/core/src/hooks/useBreakpoints/useBreakpoints.demo.tsx‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,67 @@
1-
import { BREAKPOINTS_TAILWIND, useBreakpoints } from '@siberiacancode/reactuse';
1+
import { useBreakpoints } from '@siberiacancode/reactuse';
2+
3+
const BREAKPOINTS = {
4+
mobile: 0,
5+
tablet: 768,
6+
desktop: 1024
7+
};
28

39
const Demo = () => {
4-
const breakpoints = useBreakpoints(BREAKPOINTS_TAILWIND);
10+
const breakpoints = useBreakpoints(BREAKPOINTS);
511

612
const current = breakpoints.current();
7-
const active = breakpoints.active();
8-
const sm = breakpoints.between('sm', 'md');
9-
const md = breakpoints.between('md', 'lg');
10-
const lg = breakpoints.between('lg', 'xl');
11-
const xl = breakpoints.between('xl', '2xl');
1213

1314
return (
14-
<>
15-
<p>
16-
Current breakpoints: <code>{JSON.stringify(current, null, 2)}</code>{' '}
17-
</p>
18-
<p>
19-
Active breakpoint: <code>{active}</code>
20-
</p>
21-
<p>
22-
sm: <code>{String(sm)}</code>
23-
</p>
24-
<p>
25-
md: <code>{String(md)}</code>
26-
</p>
27-
<p>
28-
lg: <code>{String(lg)}</code>
29-
</p>
30-
<p>
31-
xl: <code>{String(xl)}</code>
32-
</p>
33-
<p>
34-
2xl: <code>{String(breakpoints['2xl'])}</code>
35-
</p>
36-
</>
15+
<section className='flex justify-center p-6'>
16+
{current.includes('mobile') &&
17+
!current.includes('tablet') &&
18+
!current.includes('desktop') && (
19+
<div className='relative flex h-[430px] w-66 flex-col gap-7 rounded-4xl border px-6 pt-12 pb-8'>
20+
<div className='bg-border absolute top-3 left-1/2 h-5 w-22 -translate-x-1/2 rounded-full' />
21+
22+
<div className='flex flex-col gap-2'>
23+
<h3 className='text-3xl!'>Mobile view</h3>
24+
<p className='text-muted-foreground text-sm'>
25+
Compact <code>mobile</code> layout for small screens. Stacked content, tap-friendly
26+
buttons, and short copy that respects narrow viewports.
27+
</p>
28+
</div>
29+
</div>
30+
)}
31+
32+
{current.includes('tablet') && !current.includes('desktop') && (
33+
<div className='relative flex h-[440px] w-96 flex-col gap-7 rounded-3xl border px-8 pt-10 pb-8'>
34+
<div className='bg-border absolute top-4 left-1/2 size-2 -translate-x-1/2 rounded-full' />
35+
36+
<div className='flex flex-col gap-2'>
37+
<h3 className='text-2xl!'>Tablet view</h3>
38+
<p className='text-muted-foreground text-sm'>
39+
Balanced <code>tablet</code> layout for medium screens. More room for content with
40+
comfortable reading width and side margins.
41+
</p>
42+
</div>
43+
</div>
44+
)}
45+
46+
{current.includes('desktop') && (
47+
<div className='flex flex-col items-center'>
48+
<div className='relative flex h-72 w-[480px] flex-col gap-6 overflow-hidden rounded-xl border px-8 pt-9 pb-6'>
49+
<div className='bg-border absolute top-0 left-1/2 h-2 w-16 -translate-x-1/2 rounded-b-md' />
50+
51+
<div className='flex flex-col gap-2'>
52+
<h3>Desktop view</h3>
53+
<p className='text-muted-foreground text-sm'>
54+
Wide <code>desktop</code> layout for large displays. Multi-column content,
55+
persistent sidebars, and rich detail panes for productivity.
56+
</p>
57+
</div>
58+
</div>
59+
60+
<div className='bg-muted h-1.5 w-[540px] rounded-b-lg' />
61+
<div className='bg-muted/60 -mt-1 h-1 w-20 rounded-b-md' />
62+
</div>
63+
)}
64+
</section>
3765
);
3866
};
3967

‎packages/newdocs/content/functions/hooks/useAutoScroll.meta.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/newdocs/content/functions/hooks/useBattery.meta.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/newdocs/content/functions/hooks/useBreakpoints.meta.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/newdocs/generated/demos/hooks/useAutoScroll.demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use client';
1+
'use client'
22

33
import type { SubmitEvent } from 'react';
44

‎packages/newdocs/generated/demos/hooks/useBattery.demo.tsx‎

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
'use client'
1+
'use client';
22

33
import { useBattery } from '@siberiacancode/reactuse';
44
import {
@@ -40,7 +40,8 @@ const Demo = () => {
4040
if (battery.value.loading) {
4141
return (
4242
<section className='flex justify-center'>
43-
<div className='flex h-96 w-76 items-center justify-center rounded-4xl border'>
43+
<div className='relative flex h-[520px] w-76 items-center justify-center rounded-4xl border pt-12'>
44+
<div className='bg-border absolute top-3 left-1/2 h-5 w-18 -translate-x-1/2 rounded-full' />
4445
<Loader2Icon className='size-5 animate-spin' />
4546
</div>
4647
</section>
@@ -53,39 +54,28 @@ const Demo = () => {
5354

5455
return (
5556
<section className='flex justify-center'>
56-
<div className='flex w-76 flex-col gap-7 rounded-4xl border px-6 pt-4 pb-8'>
57-
<div className='mb-2 flex items-center justify-between'>
58-
<div className='w-12' />
57+
<div className='relative flex h-[430px] w-70 flex-col gap-7 rounded-4xl border px-6 pt-10 pb-8'>
58+
<div className='bg-border absolute top-3 left-1/2 h-5 w-18 -translate-x-1/2 rounded-full' />
5959

60-
<div className='bg-muted h-1 w-16 rounded-full' />
60+
<div className='flex h-full flex-col gap-6 pt-6'>
61+
<div className='flex flex-col items-center gap-2'>
62+
<Icon className={cn('ml-2 size-30', lowBattery ? 'text-red-500' : 'text-foreground')} />
6163

62-
<div
63-
className={cn(
64-
'flex items-center justify-end gap-1 text-xs',
65-
lowBattery ? 'text-red-500' : 'text-foreground'
66-
)}
67-
>
68-
<span>{level}%</span>
69-
<Icon className='size-5' />
64+
<div className='flex flex-col items-center gap-1'>
65+
<div className='text-5xl font-semibold tracking-tight'>{level}%</div>
66+
<span className='text-muted-foreground text-xs tracking-wider uppercase'>
67+
{battery.value.charging ? 'Charging' : 'Battery'}
68+
</span>
69+
</div>
7070
</div>
71-
</div>
72-
73-
<div className='flex flex-col gap-6'>
74-
<div className='flex flex-col gap-2'>
75-
<h2>Feedback</h2>
7671

77-
<p className='text-xs'>
72+
<div className='mt-auto flex flex-col gap-2'>
73+
<p className='text-muted-foreground text-center text-xs'>
7874
Battery has a lot of information, you can use it to get the battery level, charging
7975
status <code>{battery.value.charging ? 'charging' : 'discharging'}</code>, discharging
8076
time <code>{battery.value.dischargingTime}</code> and more.
8177
</p>
8278
</div>
83-
84-
<form className='flex flex-col gap-4'>
85-
<textarea placeholder='Tell us what can be improved...' rows={4} />
86-
87-
<button type='button'>Send feedback</button>
88-
</form>
8979
</div>
9080
</div>
9181
</section>

‎packages/newdocs/generated/demos/hooks/useBreakpoints.demo.tsx‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,69 @@
11
'use client'
22

3-
import { BREAKPOINTS_TAILWIND, useBreakpoints } from '@siberiacancode/reactuse';
3+
import { useBreakpoints } from '@siberiacancode/reactuse';
4+
5+
const BREAKPOINTS = {
6+
mobile: 0,
7+
tablet: 768,
8+
desktop: 1024
9+
};
410

511
const Demo = () => {
6-
const breakpoints = useBreakpoints(BREAKPOINTS_TAILWIND);
12+
const breakpoints = useBreakpoints(BREAKPOINTS);
713

814
const current = breakpoints.current();
9-
const active = breakpoints.active();
10-
const sm = breakpoints.between('sm', 'md');
11-
const md = breakpoints.between('md', 'lg');
12-
const lg = breakpoints.between('lg', 'xl');
13-
const xl = breakpoints.between('xl', '2xl');
1415

1516
return (
16-
<>
17-
<p>
18-
Current breakpoints: <code>{JSON.stringify(current, null, 2)}</code>{' '}
19-
</p>
20-
<p>
21-
Active breakpoint: <code>{active}</code>
22-
</p>
23-
<p>
24-
sm: <code>{String(sm)}</code>
25-
</p>
26-
<p>
27-
md: <code>{String(md)}</code>
28-
</p>
29-
<p>
30-
lg: <code>{String(lg)}</code>
31-
</p>
32-
<p>
33-
xl: <code>{String(xl)}</code>
34-
</p>
35-
<p>
36-
2xl: <code>{String(breakpoints['2xl'])}</code>
37-
</p>
38-
</>
17+
<section className='flex justify-center p-6'>
18+
{current.includes('mobile') &&
19+
!current.includes('tablet') &&
20+
!current.includes('desktop') && (
21+
<div className='relative flex h-[430px] w-66 flex-col gap-7 rounded-4xl border px-6 pt-12 pb-8'>
22+
<div className='bg-border absolute top-3 left-1/2 h-5 w-22 -translate-x-1/2 rounded-full' />
23+
24+
<div className='flex flex-col gap-2'>
25+
<h3 className='text-3xl!'>Mobile view</h3>
26+
<p className='text-muted-foreground text-sm'>
27+
Compact <code>mobile</code> layout for small screens. Stacked content, tap-friendly
28+
buttons, and short copy that respects narrow viewports.
29+
</p>
30+
</div>
31+
</div>
32+
)}
33+
34+
{current.includes('tablet') && !current.includes('desktop') && (
35+
<div className='relative flex h-[440px] w-96 flex-col gap-7 rounded-3xl border px-8 pt-10 pb-8'>
36+
<div className='bg-border absolute top-4 left-1/2 size-2 -translate-x-1/2 rounded-full' />
37+
38+
<div className='flex flex-col gap-2'>
39+
<h3 className='text-2xl!'>Tablet view</h3>
40+
<p className='text-muted-foreground text-sm'>
41+
Balanced <code>tablet</code> layout for medium screens. More room for content with
42+
comfortable reading width and side margins.
43+
</p>
44+
</div>
45+
</div>
46+
)}
47+
48+
{current.includes('desktop') && (
49+
<div className='flex flex-col items-center'>
50+
<div className='relative flex h-72 w-[480px] flex-col gap-6 overflow-hidden rounded-xl border px-8 pt-9 pb-6'>
51+
<div className='bg-border absolute top-0 left-1/2 h-2 w-16 -translate-x-1/2 rounded-b-md' />
52+
53+
<div className='flex flex-col gap-2'>
54+
<h3>Desktop view</h3>
55+
<p className='text-muted-foreground text-sm'>
56+
Wide <code>desktop</code> layout for large displays. Multi-column content,
57+
persistent sidebars, and rich detail panes for productivity.
58+
</p>
59+
</div>
60+
</div>
61+
62+
<div className='bg-muted h-1.5 w-[540px] rounded-b-lg' />
63+
<div className='bg-muted/60 -mt-1 h-1 w-20 rounded-b-md' />
64+
</div>
65+
)}
66+
</section>
3967
);
4068
};
4169

0 commit comments

Comments
 (0)