Skip to content

Commit 3a64ad3

Browse files
authored
Merge pull request #32 from cbmongithub/components
Components
2 parents 6fff7af + d9d26e5 commit 3a64ad3

File tree

8 files changed

+120
-107
lines changed

8 files changed

+120
-107
lines changed

website/app/[slug]/page.tsx

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
1-
import { BackButton } from '@/components/BackButton';
2-
import { CodeBlock } from '@/components/CodeBlock';
3-
import { CopyKeyframes } from '@/components/CopyKeyframes';
4-
import { NextJsComponentExample, OhMyZshExample, ZeroDependencyExample } from '@/components/Examples';
51
import { Hero } from '@/components/Hero';
62
import { Renderer } from '@/components/Renderer';
7-
import { Button } from '@/components/ui/Button';
83
import LOADERS from '@/lib/config/loaders';
94
import type { LoaderProps } from '@/types';
5+
import dynamic from 'next/dynamic';
106
import Link from 'next/link';
117
import { HiArrowRight } from 'react-icons/hi';
128

9+
const CodeBlock = dynamic(() =>
10+
import('@/components/CodeBlock').then((mod) => mod.CodeBlock),
11+
);
12+
const NextJsComponentExample = dynamic(() =>
13+
import('@/components/Examples').then((mod) => mod.NextJsComponentExample),
14+
);
15+
const OhMyZshExample = dynamic(() =>
16+
import('@/components/Examples').then((mod) => mod.OhMyZshExample),
17+
);
18+
const ZeroDependencyExample = dynamic(() =>
19+
import('@/components/Examples').then((mod) => mod.ZeroDependencyExample),
20+
);
21+
const BackButton = dynamic(() =>
22+
import('@/components/BackButton').then((mod) => mod.BackButton),
23+
);
24+
const CopyKeyframes = dynamic(() =>
25+
import('@/components/CopyKeyframes').then((mod) => mod.CopyKeyframes),
26+
);
27+
const Button = dynamic(() => import('@/components/ui/Button').then((mod) => mod.Button));
28+
1329
export const generateStaticParams = async () =>
1430
Object.keys(LOADERS).map((key) => ({
1531
slug: key,
@@ -42,26 +58,32 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
4258
<section className='w-full border border-x-0 border-b-0 border-t-neutral-800 p-6'>
4359
<div className='relative flex min-h-96 flex-col items-center justify-center overflow-hidden border border-neutral-800 bg-black p-6'>
4460
<div className='absolute size-full bg-[linear-gradient(to_right,#1a1a1a_1px,transparent_1px),linear-gradient(to_bottom,#1a1a1a_1px,transparent_1px)] bg-[size:8px_10px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_100%)]' />
45-
<span className="absolute top-4 left-4 text-neutral-50">Preview</span>
46-
<CopyKeyframes code={keyframes} variant='secondary' copyText='Keyframes copied to clipboard!' />
61+
<span className='absolute top-4 left-4 text-neutral-50'>Preview</span>
62+
<CopyKeyframes
63+
code={keyframes}
64+
variant='secondary'
65+
copyText='Keyframes copied to clipboard!'
66+
/>
4767
<Renderer speed={speed} keyframes={keyframes} />
4868
</div>
49-
<div className="flex flex-col w-full">
69+
<div className='flex w-full flex-col'>
5070
<h1 className='mt-6 text-lg font-light text-neutral-50'>Installation</h1>
51-
<div className="pt-6">
52-
<CodeBlock lang="bash" title="bash" code='npm install cli-loaders' />
71+
<div className='pt-6'>
72+
<CodeBlock lang='bash' title='bash' code='npm install cli-loaders' />
5373
</div>
5474

55-
<h1 className='mt-6 text-lg font-light text-neutral-50'>Importing the loader</h1>
56-
<div className="pt-6">
57-
<CodeBlock lang="ts" title="example.ts">
75+
<h1 className='mt-6 text-lg font-light text-neutral-50'>
76+
Importing the loader
77+
</h1>
78+
<div className='pt-6'>
79+
<CodeBlock lang='ts' title='example.ts'>
5880
{`import { initCliLoader } from 'cli-loaders';`}
5981
</CodeBlock>
6082
</div>
6183

62-
<h1 className='mt-6 text-lg font-light text-neutral-50'>Initializing Loader</h1>
63-
<div className="pt-6">
64-
<CodeBlock lang="tsx" title="example.ts">
84+
<h1 className='mt-6 text-lg font-light text-neutral-50'>Initializing Loader</h1>
85+
<div className='pt-6'>
86+
<CodeBlock lang='tsx' title='example.ts'>
6587
{`import { initCliLoader, ${slug} } from 'cli-loaders';
6688
6789
initCliLoader('${slug}'); // by name
@@ -70,17 +92,17 @@ initCliLoader(${slug}); // by object`}
7092
</div>
7193

7294
<h1 className='mt-6 text-lg font-light text-neutral-50'>Customizations</h1>
73-
<div className="pt-6">
74-
<CodeBlock lang="tsx" title="example.ts">
95+
<div className='pt-6'>
96+
<CodeBlock lang='tsx' title='example.ts'>
7597
{`import { initCliLoader, ${slug} } from 'cli-loaders';
7698
7799
initCliLoader('${slug}', 100); // custom speed
78100
initCliLoader('${slug}', 100, ["..", "."]); // custom speed and keyframes`}
79101
</CodeBlock>
80102
</div>
81103

82-
<div className="pt-6">
83-
<CodeBlock lang="tsx" title="example.ts">
104+
<div className='pt-6'>
105+
<CodeBlock lang='tsx' title='example.ts'>
84106
{`const myAwesomeLoader = {
85107
speed: 100,
86108
keyframes: ["..", "."]
@@ -91,8 +113,8 @@ initCliLoader(myAwesomeLoader); // custom loader object`}
91113
</div>
92114

93115
<h1 className='mt-6 text-lg font-light text-neutral-50'>Stopping a Loader</h1>
94-
<div className="pt-6">
95-
<CodeBlock lang="tsx" title="example.ts">
116+
<div className='pt-6'>
117+
<CodeBlock lang='tsx' title='example.ts'>
96118
{`import { initCliLoader } from 'cli-loaders';
97119
98120
const intervalId = initCliLoader('dots_1');
@@ -103,13 +125,13 @@ initCliLoader(myAwesomeLoader); // custom loader object`}
103125
}, 5000);`}
104126
</CodeBlock>
105127
<h1 className='mt-6 text-lg font-light text-neutral-50'>Examples</h1>
106-
<div className="pt-6">
128+
<div className='pt-6'>
107129
<OhMyZshExample speed={speed} keyframes={keyframes} />
108130
</div>
109-
<div className="pt-6">
131+
<div className='pt-6'>
110132
<NextJsComponentExample name={slug} />
111133
</div>
112-
<div className="pt-6">
134+
<div className='pt-6'>
113135
<ZeroDependencyExample speed={speed} keyframes={keyframes} />
114136
</div>
115137
</div>

website/app/page.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { CopyCode } from '@/components/CopyCode';
21
import { Hero } from '@/components/Hero';
3-
import { TopBar } from '@/components/TopBar';
42
import dynamic from 'next/dynamic';
53

4+
const TopBar = dynamic(() => import('@/components/TopBar').then((mod) => mod.TopBar));
5+
const CopyCode = dynamic(() =>
6+
import('@/components/CopyCode').then((mod) => mod.CopyCode),
7+
);
68
const Filter = dynamic(() => import('@/components/Filter').then((mod) => mod.Filter));
79

810
const HomePage = () => {

website/components/CodeBlock.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export const CodeBlock = memo(({ code, lang, title, isV2, children }: CodeBlockP
2727
{children}
2828
</Code>
2929
</div>
30-
),
31-
);
30+
));
3231

3332
CodeBlock.displayName = 'CodeBlock';

website/components/CopyButton.tsx

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,9 @@ import { useToast } from '@/hooks/use-toast';
44
import type { CopyButtonProps } from '@/types';
55
import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';
66
import { useState } from 'react';
7-
import { TbKeyframe } from 'react-icons/tb';
87
import { Button } from './ui/Button';
98

10-
export const CopyButton = ({
11-
hasKeyframes,
12-
variant,
13-
className,
14-
code,
15-
copyText,
16-
}: CopyButtonProps) => {
9+
export const CopyButton = ({ variant, className, code, copyText }: CopyButtonProps) => {
1710
const { addToast } = useToast();
1811
const [hasCheckIcon, setHasCheckIcon] = useState(false);
1912

@@ -34,8 +27,6 @@ export const CopyButton = ({
3427
icon={
3528
hasCheckIcon ? (
3629
<CheckIcon className='size-4 text-neutral-50' />
37-
) : hasKeyframes ? (
38-
<TbKeyframe className='size-4 text-neutral-50' />
3930
) : (
4031
<CopyIcon className='size-4 text-neutral-50' />
4132
)

website/components/CopyCode.tsx

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,26 @@ import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';
66
import { memo } from 'react';
77
import { Button } from './ui/Button';
88

9-
export const CopyCode = memo(({ variant, className, code, copyText }: CopyButtonProps) => {
10-
const { hasCheckIcon, handleMouseDown } = useCopy(code, copyText);
9+
export const CopyCode = memo(
10+
({ variant, className, code, copyText }: CopyButtonProps) => {
11+
const { hasCheckIcon, handleMouseDown } = useCopy(code, copyText);
1112

12-
return (
13-
<Button
14-
onMouseDown={handleMouseDown}
15-
className={className}
16-
variant={variant}
17-
icon={
18-
hasCheckIcon ? (
19-
<CheckIcon className='size-4 text-neutral-50' />
20-
) : (
21-
<CopyIcon className='size-4 text-neutral-50' />
22-
)
23-
}
24-
aria-label={hasCheckIcon ? 'Copied!' : 'Copy'}
25-
/>
26-
);
27-
},
13+
return (
14+
<Button
15+
onMouseDown={handleMouseDown}
16+
className={className}
17+
variant={variant}
18+
icon={
19+
hasCheckIcon ? (
20+
<CheckIcon className='size-4 text-neutral-50' />
21+
) : (
22+
<CopyIcon className='size-4 text-neutral-50' />
23+
)
24+
}
25+
aria-label={hasCheckIcon ? 'Copied!' : 'Copy'}
26+
/>
27+
);
28+
},
2829
);
2930

3031
CopyCode.displayName = 'CopyCode';

website/components/CopyKeyframes.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ import { TbKeyframe } from 'react-icons/tb';
88
import { Button } from './ui/Button';
99

1010
export const CopyKeyframes = memo(({ variant, code, copyText }: CopyButtonProps) => {
11-
const { hasCheckIcon, handleMouseDown } = useCopy(code, copyText);
11+
const { hasCheckIcon, handleMouseDown } = useCopy(code, copyText);
1212

13-
return (
14-
<Button
15-
onMouseDown={handleMouseDown}
16-
variant={variant}
17-
icon={
18-
hasCheckIcon ? (
19-
<CheckIcon className='size-4 text-neutral-50' />
20-
) : (
21-
<TbKeyframe className='size-4 text-neutral-50' />
22-
)
23-
}
24-
aria-label={hasCheckIcon ? 'Copied keyframes!' : 'Copy keyframes'}
25-
/>
26-
);
13+
return (
14+
<Button
15+
onMouseDown={handleMouseDown}
16+
variant={variant}
17+
icon={
18+
hasCheckIcon ? (
19+
<CheckIcon className='size-4 text-neutral-50' />
20+
) : (
21+
<TbKeyframe className='size-4 text-neutral-50' />
22+
)
23+
}
24+
aria-label={hasCheckIcon ? 'Copied keyframes!' : 'Copy keyframes'}
25+
/>
26+
);
2727
});
2828

2929
CopyKeyframes.displayName = 'CopyKeyframes';

website/components/Examples.tsx

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { memo, useMemo } from 'react';
33
import { CodeBlock } from './CodeBlock';
44

55
export const ZeroDependencyExample = memo(
6-
({ speed, keyframes }: Partial<LoaderProps>) => {
7-
const title = 'Zero Dependency Example';
8-
const code = useMemo(
9-
() => `const initCliLoader = () => {
6+
({ speed, keyframes }: Partial<LoaderProps>) => {
7+
const title = 'Zero Dependency Example';
8+
const code = useMemo(
9+
() => `const initCliLoader = () => {
1010
// Set keyframes
1111
const keyframes = [${keyframes?.map((keyframe) => `"${keyframe}"`).join(', ')}];
1212
// Set speed in milliseconds
@@ -21,19 +21,19 @@ export const ZeroDependencyExample = memo(
2121
};
2222
// Start the loader
2323
initCliLoader();`,
24-
[speed, keyframes],
25-
);
24+
[speed, keyframes],
25+
);
2626

27-
return <CodeBlock lang='ts' title={title} code={code} />;
28-
},
27+
return <CodeBlock lang='ts' title={title} code={code} />;
28+
},
2929
);
3030

3131
ZeroDependencyExample.displayName = 'ZeroDependencyExample';
3232

3333
export const OhMyZshExample = memo(({ speed, keyframes }: Partial<LoaderProps>) => {
34-
const title = 'Oh My Zsh Example';
35-
const code = useMemo(
36-
() => `function start_loader() {
34+
const title = 'Oh My Zsh Example';
35+
const code = useMemo(
36+
() => `function start_loader() {
3737
local keyframes=(${keyframes?.map((keyframe) => `"${keyframe}"`).join(' ')}) # Keyframes for the loader
3838
local speed=${speed} # Speed at which the keyframes change
3939
local pname=$1 # PID of the process to wait for
@@ -54,19 +54,18 @@ function custom_loader() {
5454
(sleep 5) & # Simulate a long-running task in the background
5555
start_loader $! # Call the loader with the PID of the background process
5656
}`,
57-
[speed, keyframes],
58-
);
57+
[speed, keyframes],
58+
);
5959

60-
return <CodeBlock lang='bash' title={title} code={code} />;
60+
return <CodeBlock lang='bash' title={title} code={code} />;
6161
});
6262

6363
OhMyZshExample.displayName = 'OhMyZshExample';
6464

65-
export const NextJsComponentExample = memo(
66-
({ name }: Partial<LoaderProps>) => {
67-
const title = 'Next.js Component Example';
68-
const code = useMemo(
69-
() => `"use client";
65+
export const NextJsComponentExample = memo(({ name }: Partial<LoaderProps>) => {
66+
const title = 'Next.js Component Example';
67+
const code = useMemo(
68+
() => `"use client";
7069
7170
import React, { useEffect, useState } from 'react';
7271
@@ -107,11 +106,10 @@ const Page = () => (
107106
);
108107
109108
export default Page;`,
110-
[name],
111-
);
109+
[name],
110+
);
112111

113-
return <CodeBlock lang='tsx' title={title} code={code} />;
114-
},
115-
);
112+
return <CodeBlock lang='tsx' title={title} code={code} />;
113+
});
116114

117115
NextJsComponentExample.displayName = 'NextJsComponentExample';

website/hooks/use-copy.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import { useToast } from '@/hooks/use-toast';
22
import { useCallback, useState } from 'react';
33

44
export const useCopy = (code: string | string[], copyText: string) => {
5-
const [hasCheckIcon, setHasCheckIcon] = useState(false);
6-
const { addToast } = useToast();
5+
const [hasCheckIcon, setHasCheckIcon] = useState(false);
6+
const { addToast } = useToast();
77

8-
const handleMouseDown = useCallback(() => {
9-
navigator.clipboard.writeText(code as string);
10-
setHasCheckIcon(true);
11-
addToast(copyText);
12-
setTimeout(() => {
13-
setHasCheckIcon(false);
14-
}, 1000);
15-
}, [copyText, addToast]);
8+
const handleMouseDown = useCallback(() => {
9+
navigator.clipboard.writeText(code as string);
10+
setHasCheckIcon(true);
11+
addToast(copyText);
12+
setTimeout(() => {
13+
setHasCheckIcon(false);
14+
}, 1000);
15+
}, [copyText, addToast]);
1616

17-
return { handleMouseDown, hasCheckIcon };
17+
return { handleMouseDown, hasCheckIcon };
1818
};

0 commit comments

Comments
 (0)