Layout updated

example/package.json

@@ -18,6 +18,7 @@
     "clsx": "^2.1.0",
     "lucide-react": "^0.306.0",
     "react-app-polyfill": "^3.0.0",
+    "react-code-blocks": "^0.1.5",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7"
   },

example/src/common/CodeSample.tsx

@@ -0,0 +1,19 @@
+import { CodeBlock, dracula } from 'react-code-blocks'
+import Usage from './Details/Usage'
+
+export default function CodeSample({ code }: any) {
+    return (
+        <Usage title="Syntex">
+            <CodeBlock
+                customStyle={{
+                    padding: "0 0.1rem"
+                }}
+                theme={dracula}
+                text={code}
+                language="jsx"
+                wrapLongLines
+                showLineNumbers={false}
+            />
+        </Usage>
+    )
+}

example/src/common/Details/Block.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { cn } from '@/lib/utils'
 
-export default function Usage({ title, children }: any) {
+export default function Block({ title, children, className, ...rest }: any) {
     return (
-        <div className='mt-4 border rounded-md p-4 bg-slate-50'>
+        <div className={`${cn('mt-4 border rounded-md p-4 bg-slate-50', className)}`} {...rest}>
             <p className='text-lg border-b pb-2 font-semibold tracking-wider mb-4 text-slate-800'>
                 {title}
             </p>

example/src/common/Details/RedirectToExample.tsx

@@ -1,32 +1,31 @@
 import { Button } from '@/components/ui/button'
-import { examleSandboxLinks, exampleMarkDownPrefixUrl } from '@/lib/utils';
 import { MoveUpRightIcon } from 'lucide-react'
 
-export default function RedirectToExample({ hook }: any) {
+const githubUrl = 'https://github.com/PunitSoniME/react-helper-hooks/blob/main'
+const hookCodeUrl = `${githubUrl}/src`;
+const exampleCodeUrl = `${githubUrl}/example/src/hooks`;
 
-    const codeSandboxLink = examleSandboxLinks[hook];
+export default function RedirectToExample({ hook }: any) {
 
     return (
         <>
             <Button size="sm" className='mt-2'
                 onClick={() => {
-                    window.open(`${exampleMarkDownPrefixUrl}/${hook}.md`, '_blank');
+                    window.open(`${hookCodeUrl}/${hook}/index.tsx`, '_blank');
                 }}
             >
                 Example Code
                 <MoveUpRightIcon className='ml-2' size={14} />
             </Button>
 
-            {
-                codeSandboxLink ? <Button size="sm" variant="secondary" className='ml-2 mt-2'
-                    onClick={() => {
-                        window.open(codeSandboxLink, '_blank');
-                    }}
-                >
-                    Example Playground
-                    <MoveUpRightIcon className='ml-2' size={14} />
-                </Button> : ""
-            }
+            <Button size="sm" variant="secondary" className='ml-2 mt-2'
+                onClick={() => {
+                    window.open(`${exampleCodeUrl}/${hook}/index.tsx`, '_blank');
+                }}
+            >
+                Source code of hook
+                <MoveUpRightIcon className='ml-2' size={14} />
+            </Button>
         </>
     )
 }

example/src/common/Details/Usage.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function Usage({ title, children }: any) {
+    return (
+        <div className='mt-4 border rounded-md bg-slate-50'>
+            <p className='text-lg p-4 font-semibold tracking-wider text-slate-800'>
+                {title || "Usage"}
+            </p>
+
+            {children}
+        </div>
+    )
+}

example/src/common/Documentation.tsx

@@ -0,0 +1,27 @@
+import React, { lazy, Suspense } from 'react'
+
+const Title = lazy(() => import('@/common/Details/Title'));
+const Lead = lazy(() => import('@/common/Lead'));
+const CodeSample = lazy(() => import('@/common/CodeSample'));
+
+export default function Documentation({ hook, info, usage, children }: any) {
+    return (
+        <>
+            <Suspense fallback={<></>}>
+                <Title>{hook}</Title>
+            </Suspense>
+
+            <Suspense fallback={<>Loading Code Block</>}>
+                <Lead className='text-md'>
+                    {info}
+                </Lead>
+            </Suspense>
+
+            <Suspense fallback={<></>}>
+                <CodeSample code={usage} />
+            </Suspense>
+
+            {children}
+        </>
+    )
+}

example/src/common/Lead.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 
 export default function Lead({ className, children, ...rest }: any) {
     return (
-        <p className={cn('text-xl text-muted-foreground', className)}
+        <pre className={cn('text-xl text-muted-foreground whitespace-pre-wrap', className)}
             {...rest}
         >
             {children}
-        </p>
+        </pre>
     )
 }

example/src/hooks/useArray/index.tsx

@@ -0,0 +1,72 @@
+import { lazy, Suspense } from 'react';
+import { useArray } from '../../../..';
+import { packageName } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+const Block = lazy(() => import('@/common/Details/Block'));
+const Documentation = lazy(() => import('@/common/Documentation'));
+
+const hook = 'useArray';
+const info = 'Useful to use methods of array like push, update, remove, filter, update, clear etc...';
+
+const usage: string = `import { ${hook} } from '${packageName}';
+
+export default function Component() {
+    /*
+        @params - Array - The datasource as an array
+
+        @returns
+            array - Array - Data on which operation to perform
+            set - function - Re-initialize the array with new data
+            push - function - Insert an element in array
+            remove - function - Remove an element from array
+            filter - function - Filter out the data from array ( This will mutate the source )
+            update - function - Update any element of array
+            clear - function - Clear whole array
+    */
+    const { array, set, push, remove, filter, update, clear } = ${hook}([DATA]);
+}`
+
+const api = [
+    { execute: 'array', type: 'array', description: 'Data on which operation to perform' },
+    { execute: 'set', type: 'function', description: 'Re-initialize the array with new data' },
+    { execute: 'push', type: 'function', description: 'Insert an element in array' },
+    { execute: 'remove', type: 'function', description: 'Remove an element from array' },
+    { execute: 'filter', type: 'function', description: 'Filter out the data from array ( This will mutate the source )' },
+    { execute: 'update', type: 'function', description: 'Update any element of array' },
+    { execute: 'clear', type: 'function', description: 'Clear whole array' }
+];
+
+export default function ArrayComponent() {
+
+    const { array, set, push, remove, filter, update, clear } = useArray([1, 2, 3, 4, 5, 6])
+
+    return (
+        <Suspense fallback={<></>}>
+
+            <Documentation
+                hook={hook}
+                info={info}
+                usage={usage}
+            >
+                <Block title='Example'>
+
+                    <div>{array.join(", ")}</div>
+
+                    <div className="flex flex-row flex-wrap gap-3 mt-2">
+                        <Button size="sm" onClick={() => push(((Math.random() + 1) * 10).toFixed(0))}>Add random number</Button>
+                        <Button size="sm" onClick={() => update(1, 9)}>Update 2nd element to 9</Button>
+                        <Button size="sm" onClick={() => remove(1)}>Remove Second Element</Button>
+                        <Button size="sm" onClick={() => filter(f => f < 3)}>Keep numbers less than 3</Button>
+                        <Button size="sm" onClick={() => set([1, 2])}>Set 1 to 2</Button>
+                        <Button size="sm" onClick={clear}>Clear</Button>
+                    </div>
+                </Block>
+
+
+            </Documentation>
+
+        </Suspense>
+    )
+}
+