Skip to content

Commit 4467f3b

Browse files
debabindebabin
committed
main 🧊 add new demos
1 parent 73991bd commit 4467f3b

4 files changed

Lines changed: 96 additions & 98 deletions

File tree

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

Lines changed: 38 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,7 @@ import { useState } from 'react';
33

44
import { cn } from '@/utils/lib';
55

6-
const HISTORY = 30;
7-
8-
const getColor = (fps: number) => {
9-
if (fps >= 50) return 'text-green-500';
10-
if (fps >= 30) return 'text-amber-500';
11-
return 'text-destructive';
12-
};
6+
const HISTORY = 40;
137

148
const getBarColor = (fps: number) => {
159
if (fps >= 50) return 'bg-green-500';
@@ -30,74 +24,46 @@ const Demo = () => {
3024
const peak = history.length ? Math.max(...history) : 0;
3125

3226
return (
33-
<section className='flex w-full max-w-xs flex-col p-4'>
34-
<div className='border-border bg-card flex flex-col gap-3 rounded-xl border p-3 shadow-sm'>
35-
<div className='flex items-end justify-between gap-3'>
36-
<div className='flex flex-col leading-none'>
37-
<span className='text-muted-foreground text-[9px] tracking-[0.2em] uppercase'>
38-
Frames per second
39-
</span>
40-
<div className='flex items-baseline gap-1.5'>
41-
<span
42-
className={cn(
43-
'font-mono text-2xl font-bold tabular-nums transition-colors',
44-
getColor(fps)
45-
)}
46-
>
47-
{String(fps).padStart(2, '0')}
48-
</span>
49-
<span className='text-muted-foreground text-[10px]'>FPS</span>
50-
</div>
51-
</div>
52-
53-
<div className='flex items-center gap-1.5'>
54-
<span className={cn('size-1.5 animate-pulse rounded-full', getBarColor(fps))} />
55-
<span className='text-muted-foreground font-mono text-[9px] tracking-wider uppercase'>
56-
Live
57-
</span>
58-
</div>
59-
</div>
27+
<section className='flex w-full max-w-sm flex-col gap-3 p-4'>
28+
<div className='flex items-center justify-between'>
29+
<span className='text-foreground text-sm font-semibold'>Frames per second</span>
30+
<span className='text-muted-foreground font-mono text-xs tabular-nums'>
31+
{String(fps).padStart(2, '0')} FPS
32+
</span>
33+
</div>
6034

61-
<div className='flex h-10 items-end gap-[2px]'>
62-
{Array.from({ length: HISTORY }).map((_, index) => {
63-
const value = history[history.length - HISTORY + index] ?? 0;
64-
const height = Math.max((value / max) * 100, 4);
35+
<div className='bg-background flex h-28 items-end gap-[2px] rounded-lg border p-3'>
36+
{Array.from({ length: HISTORY }).map((_, index) => {
37+
const value = history[history.length - HISTORY + index] ?? 0;
38+
const height = Math.max((value / max) * 100, 4);
39+
return (
40+
<div
41+
key={index}
42+
className={cn('flex-1 rounded-sm', value ? getBarColor(value) : 'bg-muted')}
43+
style={{ height: `${height}%`, opacity: value ? 1 : 0.4 }}
44+
/>
45+
);
46+
})}
47+
</div>
6548

66-
return (
67-
<div
68-
key={index}
69-
className={cn('flex-1 rounded-sm', value ? getBarColor(value) : 'bg-muted')}
70-
style={{ height: `${height}%`, opacity: value ? 1 : 0.4 }}
71-
/>
72-
);
73-
})}
49+
<div className='grid grid-cols-3 gap-3'>
50+
<div className='flex flex-col gap-0.5'>
51+
<span className='text-muted-foreground text-[10px] tracking-wider uppercase'>Min</span>
52+
<span className='text-foreground font-mono text-sm font-semibold tabular-nums'>
53+
{min || '—'}
54+
</span>
7455
</div>
75-
76-
<div className='border-border grid grid-cols-3 gap-2 border-t pt-2'>
77-
<div className='flex flex-col items-center leading-tight'>
78-
<span className='text-muted-foreground text-[8px] tracking-[0.15em] uppercase'>
79-
Min
80-
</span>
81-
<span className='text-foreground font-mono text-xs font-semibold tabular-nums'>
82-
{min || '—'}
83-
</span>
84-
</div>
85-
<div className='flex flex-col items-center leading-tight'>
86-
<span className='text-muted-foreground text-[8px] tracking-[0.15em] uppercase'>
87-
Avg
88-
</span>
89-
<span className='text-foreground font-mono text-xs font-semibold tabular-nums'>
90-
{avg || '—'}
91-
</span>
92-
</div>
93-
<div className='flex flex-col items-center leading-tight'>
94-
<span className='text-muted-foreground text-[8px] tracking-[0.15em] uppercase'>
95-
Peak
96-
</span>
97-
<span className='text-foreground font-mono text-xs font-semibold tabular-nums'>
98-
{peak || '—'}
99-
</span>
100-
</div>
56+
<div className='flex flex-col gap-0.5'>
57+
<span className='text-muted-foreground text-[10px] tracking-wider uppercase'>Avg</span>
58+
<span className='text-foreground font-mono text-sm font-semibold tabular-nums'>
59+
{avg || '—'}
60+
</span>
61+
</div>
62+
<div className='flex flex-col gap-0.5'>
63+
<span className='text-muted-foreground text-[10px] tracking-wider uppercase'>Peak</span>
64+
<span className='text-foreground font-mono text-sm font-semibold tabular-nums'>
65+
{peak || '—'}
66+
</span>
10167
</div>
10268
</div>
10369
</section>

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

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,16 @@ const Demo = () => {
1818
if (view === 'mobile') {
1919
return (
2020
<section className='flex justify-center p-6'>
21-
<div className='relative flex h-[430px] w-[264px] flex-col gap-4 overflow-hidden rounded-[2rem] border px-4 pt-12 pb-4'>
21+
<div className='relative flex h-107.5 w-66 flex-col gap-4 overflow-hidden rounded-4xl border px-4 pt-12 pb-4'>
2222
<div className='bg-border absolute top-3 left-1/2 h-5 w-22 -translate-x-1/2 rounded-full' />
2323

24-
<h3 className='text-2xl font-bold'>Mobile view</h3>
25-
<p className='text-muted-foreground text-sm'>
26-
Compact <code>mobile</code> layout for small screens. Stacked cards, tap-friendly rows,
27-
and short copy for narrow viewports.
24+
<div className='flex items-center justify-between px-1'>
25+
<h3 className='text-3xl!'>Mobile view</h3>
26+
</div>
27+
28+
<p className='text-muted-foreground px-1 text-sm'>
29+
Compact <code>mobile</code> layout for small screens. Stacked destinations, tap-friendly
30+
actions, and short copy that respects narrow viewports.
2831
</p>
2932

3033
<div className='flex flex-col gap-2'>
@@ -56,10 +59,13 @@ const Demo = () => {
5659
<div className='relative flex h-[440px] w-96 flex-col gap-4 overflow-hidden rounded-3xl border px-5 pt-10 pb-5'>
5760
<div className='bg-border absolute top-4 left-1/2 size-2 -translate-x-1/2 rounded-full' />
5861

59-
<h3 className='text-xl font-bold'>Tablet view</h3>
62+
<div className='flex items-center justify-between'>
63+
<h3 className='text-xl!'>Tablet view</h3>
64+
</div>
65+
6066
<p className='text-muted-foreground text-sm'>
61-
Balanced <code>tablet</code> layout for medium screens. A two-column grid with more room
62-
for content and comfortable margins.
67+
Balanced <code>tablet</code> layout for medium screens. More room for planning with a
68+
comfortable reading width and a tidy two-column grid.
6369
</p>
6470

6571
<div className='grid grid-cols-2 gap-2'>
@@ -90,13 +96,16 @@ const Demo = () => {
9096
<div className='relative flex h-80 w-[480px] flex-col gap-4 overflow-hidden rounded-xl border px-6 pt-9 pb-5'>
9197
<div className='bg-border absolute top-0 left-1/2 h-2 w-16 -translate-x-1/2 rounded-b-md' />
9298

93-
<h3 className='text-2xl font-bold'>Desktop view</h3>
99+
<div className='flex items-center justify-between'>
100+
<h3 className='text-4xl!'>Desktop view</h3>
101+
</div>
102+
94103
<p className='text-muted-foreground text-sm'>
95-
Wide <code>desktop</code> layout for large displays. A three-column grid showing the
96-
full catalog at once with rich detail.
104+
Wide <code>desktop</code> layout for large displays. Multi-column trip planning, richer
105+
details, and room to compare destinations side by side.
97106
</p>
98107

99-
<div className='mt-3 grid grid-cols-3 gap-2'>
108+
<div className='mt-5 grid grid-cols-3 gap-2'>
100109
{PLACES.map((place) => (
101110
<div
102111
key={place.name}

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,26 @@ const Demo = () => {
9191
viewBox='0 0 100 100'
9292
>
9393
<defs>
94-
<linearGradient id='heap-line' x1='0' x2='0' y1='0' y2='1'>
94+
<linearGradient
95+
gradientUnits='userSpaceOnUse'
96+
id='heap-line'
97+
x1='0'
98+
x2='0'
99+
y1='0'
100+
y2='1'
101+
>
95102
<stop offset='0%' stopColor='#ef4444' />
96103
<stop offset='50%' stopColor='#eab308' />
97104
<stop offset='100%' stopColor='#22c55e' />
98105
</linearGradient>
99-
<linearGradient id='heap-area' x1='0' x2='0' y1='0' y2='1'>
106+
<linearGradient
107+
gradientUnits='userSpaceOnUse'
108+
id='heap-area'
109+
x1='0'
110+
x2='0'
111+
y1='0'
112+
y2='1'
113+
>
100114
<stop offset='0%' stopColor='#ef4444' stopOpacity='0.2' />
101115
<stop offset='100%' stopColor='#22c55e' stopOpacity='0' />
102116
</linearGradient>

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

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,16 @@ const Demo = () => {
2020
if (view === 'mobile') {
2121
return (
2222
<section className='flex justify-center p-6'>
23-
<div className='relative flex h-[430px] w-[264px] flex-col gap-4 overflow-hidden rounded-[2rem] border px-4 pt-12 pb-4'>
23+
<div className='relative flex h-107.5 w-66 flex-col gap-4 overflow-hidden rounded-4xl border px-4 pt-12 pb-4'>
2424
<div className='bg-border absolute top-3 left-1/2 h-5 w-22 -translate-x-1/2 rounded-full' />
2525

26-
<h3 className='text-2xl font-bold'>Mobile view</h3>
27-
<p className='text-muted-foreground text-sm'>
28-
Compact <code>mobile</code> layout for small screens. Stacked cards, tap-friendly rows,
29-
and short copy for narrow viewports.
26+
<div className='flex items-center justify-between px-1'>
27+
<h3 className='text-3xl!'>Mobile view</h3>
28+
</div>
29+
30+
<p className='text-muted-foreground px-1 text-sm'>
31+
Compact <code>mobile</code> layout for small screens. Stacked destinations,
32+
tap-friendly actions, and short copy that respects narrow viewports.
3033
</p>
3134

3235
<div className='flex flex-col gap-2'>
@@ -58,10 +61,13 @@ const Demo = () => {
5861
<div className='relative flex h-[440px] w-96 flex-col gap-4 overflow-hidden rounded-3xl border px-5 pt-10 pb-5'>
5962
<div className='bg-border absolute top-4 left-1/2 size-2 -translate-x-1/2 rounded-full' />
6063

61-
<h3 className='text-xl font-bold'>Tablet view</h3>
64+
<div className='flex items-center justify-between'>
65+
<h3 className='text-xl!'>Tablet view</h3>
66+
</div>
67+
6268
<p className='text-muted-foreground text-sm'>
63-
Balanced <code>tablet</code> layout for medium screens. A two-column grid with more room
64-
for content and comfortable margins.
69+
Balanced <code>tablet</code> layout for medium screens. More room for planning with a
70+
comfortable reading width and a tidy two-column grid.
6571
</p>
6672

6773
<div className='grid grid-cols-2 gap-2'>
@@ -92,13 +98,16 @@ const Demo = () => {
9298
<div className='relative flex h-80 w-[480px] flex-col gap-4 overflow-hidden rounded-xl border px-6 pt-9 pb-5'>
9399
<div className='bg-border absolute top-0 left-1/2 h-2 w-16 -translate-x-1/2 rounded-b-md' />
94100

95-
<h3 className='text-2xl font-bold'>Desktop view</h3>
101+
<div className='flex items-center justify-between'>
102+
<h3 className='text-4xl!'>Desktop view</h3>
103+
</div>
104+
96105
<p className='text-muted-foreground text-sm'>
97-
Wide <code>desktop</code> layout for large displays. A three-column grid showing the
98-
full catalog at once with rich detail.
106+
Wide <code>desktop</code> layout for large displays. Multi-column trip planning, richer
107+
details, and room to compare destinations side by side.
99108
</p>
100109

101-
<div className='mt-3 grid grid-cols-3 gap-2'>
110+
<div className='mt-5 grid grid-cols-3 gap-2'>
102111
{PLACES.map((place) => (
103112
<div
104113
key={place.name}

0 commit comments

Comments
 (0)