Code Seperated

PunitSoniME · Jan 7, 2024 · cd879a3 · cd879a3
1 parent 4808421
commit cd879a3
Show file tree

Hide file tree

Showing 11 changed files with 354 additions and 227 deletions.
diff --git a/example/src/common/Detail.tsx b/example/src/common/Detail.tsx
diff --git a/example/src/common/Details/Block.tsx b/example/src/common/Details/Block.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function Usage({ title, children }: any) {
+    return (
+        <div className='mt-4 border rounded-md p-4 bg-slate-50'>
+            <p className='text-lg font-semibold tracking-wider mb-2 text-slate-800'>
+                {title}
+            </p>
+
+            {children}
+
+        </div>
+    )
+}
diff --git a/example/src/common/Details/Title.tsx b/example/src/common/Details/Title.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Title({ children }: any) {
+    return (
+        <h2 className="text-blue-600 scroll-m-20 mb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0">
+            {children}
+        </h2>
+    )
+}
diff --git a/example/src/hooks/useDebounce/DebounceComponent.tsx b/example/src/hooks/useDebounce/DebounceComponent.tsx
@@ -1,12 +1,13 @@
-import React, { lazy, Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { useState } from 'react'
 import { useDebounce } from '../../../../.';
-import { hooks } from '@/lib/utils';
+import { packageName } from '@/lib/utils';
 
-const Detail = lazy(() => import('@/common/Detail'));
+const Title = lazy(() => import('@/common/Details/Title'));
+const Block = lazy(() => import('@/common/Details/Block'));
+const Lead = lazy(() => import('@/common/Lead'));
 
-const key = 'useDebounce';
-const hookDetails = hooks[key];
+const hook = 'useDebounce';
 
 export default function DebounceComponent() {
 
@@ -18,37 +19,38 @@ export default function DebounceComponent() {
     }, 1000, [search]);
 
     return (
-
         <Suspense fallback={<></>}>
 
-            <Detail
-                title={key}
-                description={hookDetails.description}
-                usage='useDebounce(() => { EXECUTION_OF_CODE }, 1000, [DEPENDENCIES]);'
-            >
-                <div className="flex flex-col gap-1">
-                    <p>This hook will change the value of debounced variable after 1 second whenever you stop typing</p>
-                    <input className="focus-within:outline-none focus-within:border-slate-600 w-full border border-slate-300 px-3 py-2 rounded-md text-sm text-slate-800" type="search" placeholder="Search to make api call" value={search}
+            <Title>{hook}</Title>
+
+            <Lead className='text-md'>
+                The <code>{hook}</code> will wait for sometime once user stop typing anything
+            </Lead>
+
+            <Block title='Usage'>
+                <div className='flex flex-col gap-5'>
+                    <code>
+                        {`import { ${hook} } from "${packageName}";`}
+                    </code>
+                    <code>
+                        {'useDebounce(() => { EXECUTION_OF_CODE}, 1000, [DEPENDENCIES]);'}
+                    </code>
+                </div>
+            </Block>
+
+            <Block title='Example'>
+                <div className="flex flex-col gap-3">
+                    <p>This hook will change the value of debounced variable after 1 second whenever you stop typing.</p>
+
+                    <input className="focus-within:outline-none focus-within:border-slate-600 w-full lg:w-1/2 border border-slate-300 px-3 py-2 rounded-md text-sm text-slate-800" type="search" placeholder="Search to make api call" value={search}
                         onChange={(e) => { setSearch(e.target.value) }} />
 
                     <div className="flex flex-col gap-1 mt-2">
                         <p className="text-sm">Value - {search}</p>
                         <p className="text-sm">Debounced Value - {debounced}</p>
                     </div>
                 </div>
-
-            </Detail>
+            </Block>
         </Suspense>
-
-        // <div>
-        //     <code>
-        //         <span dangerouslySetInnerHTML={{ __html: `useDebounce(() => alert("Make api call now"), 1000, [search]);` }}></span>
-        //     </code>
-        //     <br />
-        //     <p>This hook will call after 1 second whenever you stop typing</p>
-        //     <br />
-        //     <input type="search" placeholder="Search to make api call" value={search}
-        //         onChange={(e) => { setSearch(e.target.value) }} />
-        // </div>
     )
 }
diff --git a/example/src/hooks/useTimeout/TimeoutComponent.tsx b/example/src/hooks/useTimeout/TimeoutComponent.tsx
@@ -1,15 +1,21 @@
-import React, { lazy, Suspense } from 'react';
+import React, { Fragment, lazy, Suspense } from 'react';
 import { useState } from 'react'
 import { useTimeout } from '../../../../.';
 import { Button } from '@/components/ui/button';
-import { hooks } from '@/lib/utils';
+import { packageName } from '@/lib/utils';
 
-const Detail = lazy(() => import('@/common/Detail'));
+const Title = lazy(() => import('@/common/Details/Title'));
+const Block = lazy(() => import('@/common/Details/Block'));
+const Lead = lazy(() => import('@/common/Lead'));
 
-const key = 'useTimeout';
-const hookDetails = hooks[key];
+const hook = 'useTimeout';
 
-const defaultTimer = hookDetails.props.defaultTimeout / 1000;
+const defaultTimer = 15000 / 1000;
+
+const api = [
+    { execute: 'clear ( function )', description: 'To clear already running timeout' },
+    { execute: 'reset ( function )', description: 'The function to reset the timer again' }
+];
 
 export default function TimeoutComponent({ defaultTimeout }: any) {
 
@@ -20,12 +26,37 @@ export default function TimeoutComponent({ defaultTimeout }: any) {
         <>
             <Suspense fallback={<></>}>
 
-                <Detail
-                    title={key}
-                    description={hookDetails.description}
-                    usage={`const { clear, reset } = useTimeout(() => { CODE_TO_EXECUTE }, TIMER_IN_MILLISECONDS);`}
-                    api={hookDetails.api}
-                >
+                <Title>{hook}</Title>
+
+                <Lead className='text-md'>
+                    The <code>{hook}</code> works just like setTimeout, however we created one single hook which can also do reset and clear timeout
+                </Lead>
+
+                <Block title='Usage'>
+                    <div className='flex flex-col gap-5'>
+                        <code>
+                            {`import { ${hook} } from "${packageName}";`}
+                        </code>
+                        <code>
+                            {'const { clear, reset } = useTimeout(() => { CODE_TO_EXECUTE }, TIMER_IN_MILLISECONDS);'}
+                        </code>
+                    </div>
+                </Block>
+
+                <Block title='Api'>
+                    {
+                        api.map((m: any, index: number) =>
+                            <Fragment key={index}>
+                                <div className='flex gap-1'>
+                                    <span className='font-semibold'>{m.execute} -</span>
+                                    <span className=''>{m.description}</span>
+                                </div>
+                            </Fragment>
+                        )
+                    }
+                </Block>
+
+                <Block title='Example'>
                     <ul className='list-decimal pl-5 mb-5'>
                         <li>
                             In this example, when page reloads, it will wait for {defaultTimer} seconds and then value will be changed to 0
@@ -45,9 +76,7 @@ export default function TimeoutComponent({ defaultTimeout }: any) {
                         <Button size="sm" onClick={clear}>Clear Timeout</Button>
                         <Button size="sm" onClick={reset}>Reset Timeout</Button>
                     </div>
-
-                </Detail>
-
+                </Block>
             </Suspense>
 
         </>

diff --git a/example/src/hooks/useToggle/ToggleComponent.tsx b/example/src/hooks/useToggle/ToggleComponent.tsx
@@ -1,12 +1,13 @@
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { useToggle } from '../../../../.';
 import { Button } from '@/components/ui/button';
-import Detail from '@/common/Detail';
-import { hooks } from '@/lib/utils';
+import { packageName } from '@/lib/utils';
 
-const key = 'useToggle';
-const hookDetails = hooks[key];
+const Title = lazy(() => import('@/common/Details/Title'));
+const Lead = lazy(() => import('@/common/Lead'));
+const Block = lazy(() => import('@/common/Details/Block'));
 
+const hook = 'useToggle';
 
 export default function ToggleComponent() {
 
@@ -15,18 +16,31 @@ export default function ToggleComponent() {
     return (
         <Suspense fallback={<></>}>
 
-            <Detail
-                title={key}
-                description={hookDetails.description}
-                usage="const [isSelected, toggleSelected] = useToggle(false);"
-            >
+            <Title>{hook}</Title>
+
+            <Lead className='text-md'>
+                The <code>{hook}</code> hook is a custom React hook that facilitates toggling between two states.
+            </Lead>
+
+            <Block title='Usage'>
+                <div className='flex flex-col gap-5'>
+                    <code>
+                        {`import { ${hook} } from "${packageName}";`}
+                    </code>
+                    <code>
+                        {'const [isSelected, toggleSelected] = useToggle(false);'}
+                    </code>
+                </div>
+            </Block>
+
+            <Block title='Example'>
                 <div className="mb-2">{isSelected.toString()}</div>
                 <div className='flex gap-3'>
                     <Button size="sm" onClick={toggleSelected}>Toggle</Button>
                     <Button size="sm" onClick={() => toggleSelected(true)}>Make True</Button>
                     <Button size="sm" onClick={() => toggleSelected(false)}>Make False</Button>
                 </div>
-            </Detail>
+            </Block>
 
         </Suspense>