Skip to content

Commit fe9804c

Browse files
debabindebabin
committed
main 🧊 add new demo
1 parent 1864b33 commit fe9804c

49 files changed

Lines changed: 529 additions & 33 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const Demo = () => {
99
const [copied, setCopied] = useState(false);
1010

1111
const onShare = () => {
12+
if (copied) return;
1213
clipboard.copy(SHARE_URL);
1314
setCopied(true);
1415
setTimeout(() => {

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

Lines changed: 75 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,83 @@
11
import { useConst } from '@siberiacancode/reactuse';
2+
import { HeartIcon } from 'lucide-react';
3+
import { useState } from 'react';
4+
5+
const PALETTES = [
6+
['#0f172a', '#1e293b', '#475569', '#94a3b8', '#cbd5e1'],
7+
['#7c2d12', '#c2410c', '#f97316', '#fdba74', '#fff7ed'],
8+
['#064e3b', '#047857', '#10b981', '#6ee7b7', '#ecfdf5'],
9+
['#1e1b4b', '#4338ca', '#818cf8', '#c7d2fe', '#eef2ff'],
10+
['#831843', '#be185d', '#ec4899', '#f9a8d4', '#fdf2f8']
11+
];
12+
13+
const GRID_COLS = 35;
14+
const GRID_ROWS = 20;
15+
16+
const random = <T,>(items: T[]): T => items[Math.floor(Math.random() * items.length)];
17+
18+
const formatPostedAt = (date: Date) =>
19+
date.toLocaleDateString('en-US', {
20+
month: 'short',
21+
day: 'numeric',
22+
year: 'numeric'
23+
});
24+
25+
const generatePost = () => {
26+
const palette = random(PALETTES);
27+
const pixels = Array.from({ length: GRID_COLS * GRID_ROWS }).map(() => random(palette));
28+
29+
return {
30+
pixels,
31+
palette,
32+
author: 'siberiacancode',
33+
postedAt: formatPostedAt(new Date())
34+
};
35+
};
236

337
const Demo = () => {
4-
const mountTime = useConst(() => new Date().toTimeString());
5-
const obj = useConst({ a: Math.random() });
38+
const post = useConst(generatePost);
39+
40+
const [liked, setLiked] = useState(false);
41+
const [likeCount, setLikeCount] = useState(() => Math.floor(Math.random() * 60) + 20);
42+
43+
const onToggleLike = () => {
44+
setLiked(!liked);
45+
setLikeCount(liked ? likeCount - 1 : likeCount + 1);
46+
};
647

748
return (
8-
<div>
9-
<p>
10-
Mount time: <code>{mountTime}</code>
11-
</p>
12-
<p>
13-
Value from constant object: <code>{obj.a}</code>
14-
</p>
15-
</div>
49+
<section className='flex min-w-xs flex-col items-center rounded-2xl border p-4 md:min-w-md'>
50+
<div className='flex w-full flex-col gap-4 overflow-hidden'>
51+
<div className='flex items-center justify-between'>
52+
<span className='text-sm font-medium'>@{post.author}</span>
53+
</div>
54+
55+
<div
56+
style={{
57+
gridTemplateColumns: `repeat(${GRID_COLS}, 1fr)`,
58+
aspectRatio: `${GRID_COLS} / ${GRID_ROWS}`
59+
}}
60+
className='grid w-full'
61+
>
62+
{post.pixels.map((color, index) => (
63+
<div key={index} className='rounded-xl' style={{ backgroundColor: color }} />
64+
))}
65+
</div>
66+
67+
<div className='flex items-center justify-between gap-4 py-2'>
68+
<button data-variant='ghost' type='button' onClick={onToggleLike}>
69+
<HeartIcon
70+
className='pointer-events-none size-4'
71+
fill={liked ? '#ef4444' : 'none'}
72+
stroke={liked ? '#ef4444' : 'currentColor'}
73+
/>
74+
<span>{likeCount} likes</span>
75+
</button>
76+
77+
<div className='text-muted-foreground text-xs'>{post.postedAt}</div>
78+
</div>
79+
</div>
80+
</section>
1681
);
1782
};
1883

‎packages/newdocs/app/(docs)/_components/layout/FunctionHeader/FunctionHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const FunctionHeader = async ({ groups, ...props }: FunctionHeaderProps)
4040
className='bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-50 w-full backdrop-blur'
4141
{...props}
4242
>
43-
<div className='container-wrapper flex h-(--header-height) items-center justify-between gap-3 px-8'>
43+
<div className='container-wrapper flex h-(--header-height) items-center justify-between gap-3 px-5'>
4444
<Burger className='lg:hidden' groups={groups} />
4545

4646
<div className='hidden min-w-0 items-center justify-between gap-3 lg:flex'>

‎packages/newdocs/app/(docs)/functions/[[...slug]]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const FunctionPage = async (props: FunctionPageProps) => {
6363
data-slot='docs'
6464
>
6565
<div className='mx-auto flex max-w-[50rem] min-w-0 flex-1 flex-col'>
66-
<div className='mb-6 flex w-full min-w-0 flex-col gap-6 px-4 text-neutral-800 md:px-0 dark:text-neutral-300'>
66+
<div className='mb-6 flex w-full min-w-0 flex-col gap-6 text-neutral-800 md:px-0 dark:text-neutral-300'>
6767
<FunctionHeader
6868
category={doc.category}
6969
description={doc.description}

‎packages/newdocs/app/(docs)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const DocsLayout = async ({ children }: DocsLayoutProps) => {
6262
<main className='mx-auto flex w-full max-w-[1600px] flex-col'>
6363
<FunctionHeader groups={sidebarGroups} />
6464

65-
<div className='container-wrapper mt-12 flex flex-1 flex-col px-2'>
65+
<div className='container-wrapper mt-12 flex flex-1 flex-col px-5'>
6666
<SidebarProvider
6767
style={
6868
{

‎packages/newdocs/content/docs/(root)/functions.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@ A quick list of available functions.
2121
- [useBrowserLanguage](/functions/hooks/useBrowserLanguage): Hook that returns the current browser language
2222
- [useBrowserLocation](/functions/hooks/useBrowserLocation): Hook that returns reactive browser location state with navigation controls
2323
- [useClickOutside](/functions/hooks/useClickOutside): Hook to handle click events outside the specified target element(s)
24-
- [useClipboard](/functions/hooks/useClipboard): Hook that manages a copy to clipboard
24+
- [useClipboard](/functions/hooks/useClipboard): Hook that manages a copy to clipboard
25+
- [useConst](/functions/hooks/useConst): Hook that returns the constant value

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"useAudio","useBattery","useBluetooth","useBreakpoints","useBroadcastChannel","useBrowserLocation","useClipboard",
1515

1616
"---utilities---",
17-
"useBatchedCallback",
17+
"useBatchedCallback","useConst",
1818

1919
"---state---",
2020
"useBoolean",

‎packages/newdocs/content/functions/hooks/useActiveElement.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ const { ref, value } = useActiveElement();
5555
## Type Declarations
5656

5757
<FunctionCode code={metadata.typeDeclarations} language="tsx" />
58+
59+
## API
60+
5861
<FunctionApi apiParameters={metadata.apiParameters} />
5962

6063
## Contributors

‎packages/newdocs/content/functions/hooks/useAsync.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ const { data, isLoading, isError, error } = useAsync(() => fetch('url'), [deps])
5353
## Type Declarations
5454

5555
<FunctionCode code={metadata.typeDeclarations} language="tsx" />
56+
57+
## API
58+
5659
<FunctionApi apiParameters={metadata.apiParameters} />
5760

5861
## Contributors

‎packages/newdocs/content/functions/hooks/useAsyncEffect.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ useAsyncEffect(async () => console.log("effect runs on updates"), deps);
5353
## Type Declarations
5454

5555
<FunctionCode code={metadata.typeDeclarations} language="tsx" />
56+
57+
## API
58+
5659
<FunctionApi apiParameters={metadata.apiParameters} />
5760

5861
## Contributors

0 commit comments

Comments
 (0)