Onboarding page

src/views/onboarding/components/defaultExamples/index.tsx

@@ -3,18 +3,14 @@ import {
   useState,
 } from 'react';
 
+import { Icon } from '@components/icon';
 import { PDLink } from '@components/pdLink';
 import { PDScrollArea } from '@components/pdScrollArea';
 import { snippets } from '@constants/snippets';
 import { cn } from '@utils/helpers';
 import { Search } from '@views/onboarding/components/search';
 
-interface DefaultExamplesProps {
-  toggleVisibility: () => void;
-}
-
-export const DefaultExamples = (props: DefaultExamplesProps) => {
-  const { toggleVisibility } = props;
+export const DefaultExamples = () => {
   const [
     filteredSnippets,
     setFilteredSnippets,
@@ -29,19 +25,16 @@ export const DefaultExamples = (props: DefaultExamplesProps) => {
   }, []);
 
   return (
-    <div
-      className="flex flex-col"
-      data-title="Default"
-    >
+    <>
       <Search onChange={handleSearch} />
-      <PDScrollArea className="h-[calc(100vh-550px)] grow overflow-y-auto">
+      <PDScrollArea className="h-[calc(100vh-550px)] overflow-y-auto">
         <ul>
           {filteredSnippets.map((snippet, index) => (
             <li key={index}>
               <PDLink
                 to={`/code?d=${snippet.id}`}
                 className={cn(
-                  'flex w-full items-center justify-between',
+                  'flex items-center justify-between',
                   'mt-1 px-3 py-4',
                   'font-geist font-body2-regular',
                   'duration-300 ease-in-out',
@@ -50,17 +43,15 @@ export const DefaultExamples = (props: DefaultExamplesProps) => {
                 )}
               >
                 {snippet.name}
+                <Icon
+                  className="rotate-180"
+                  name="icon-arrowLeft"
+                />
               </PDLink>
             </li>
           ))}
         </ul>
       </PDScrollArea>
-      <button
-        className={cn('mt-10 p-4 text-center font-body1-regular')}
-        onClick={toggleVisibility}
-      >
-        Have any ideas about Example? Request example here.
-      </button>
-    </div>
+    </>
   );
 };

src/views/onboarding/components/githubExamples/index.tsx

@@ -1,10 +1,83 @@
-import { ExampleNotFound } from '../../../../components/exampleNotFound';
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+
+import { ExampleNotFound } from '@components/exampleNotFound';
+import { Icon } from '@components/icon';
+import { Loader } from '@components/loader';
+import { PDLink } from '@components/pdLink';
+import { PDScrollArea } from '@components/pdScrollArea';
+import { cn } from '@utils/helpers';
+import { Search } from '@views/onboarding/components/search';
+import { useStoreCustomExamples } from 'src/stores/examples';
 
 export const GithubExamples = () => {
+  const customExamples = useStoreCustomExamples.use.examples();
+  const { getExamples } = useStoreCustomExamples.use.actions();
+  const { isGettingExamples } = useStoreCustomExamples.use.loading();
+
+  const [
+    filteredSnippets,
+    setFilteredSnippets,
+  ] = useState(customExamples);
+
+  const handleSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    const filtered = customExamples.filter((snippet) =>
+      snippet.name.toLowerCase().includes(query.toLowerCase()),
+    );
+    setFilteredSnippets(filtered);
+  }, [customExamples]);
+
+  useEffect(() => {
+    setFilteredSnippets(customExamples);
+  }, [
+    customExamples,
+    getExamples,
+  ]);
+
+  useEffect(() => {
+    getExamples();
+  }, [getExamples]);
+
+  if (isGettingExamples) {
+    return <Loader />;
+  }
+
+  if (!customExamples.length) {
+    return <ExampleNotFound />;
+  }
+
   return (
-    <div>
-      {/* TO DO LIST GITHUB EXAMPLES */}
-      <ExampleNotFound />
-    </div>
+    <>
+      <Search onChange={handleSearch} />
+      <PDScrollArea className="h-[calc(100vh-550px)] grow overflow-y-auto">
+        <ul>
+          {filteredSnippets.map((snippet, index) => (
+            <li key={index}>
+              <PDLink
+                to={`/code?c=${snippet.id}`}
+                className={cn(
+                  'flex w-full items-center justify-between',
+                  'mt-1 px-3 py-4',
+                  'font-geist font-body2-regular',
+                  'duration-300 ease-in-out',
+                  'hover:bg-dev-purple-100',
+                  'dark:hover:bg-dev-purple-900',
+                )}
+              >
+                {snippet.name}
+                <Icon
+                  className="rotate-180"
+                  name="icon-arrowLeft"
+                />
+              </PDLink>
+            </li>
+          ))}
+        </ul>
+      </PDScrollArea>
+    </>
   );
 };

src/views/onboarding/index.tsx

@@ -1,23 +1,16 @@
-import { useToggleVisibility } from '@pivanov/use-toggle-visibility';
 import {
   useEffect,
   useRef,
   useState,
 } from 'react';
 
-import { ModalRequestExample } from '@components/modals/modalRequestExample';
 import { PDLink } from '@components/pdLink';
 import { Tabs } from '@components/tabs';
 import { cn } from '@utils/helpers';
 import { DefaultExamples } from '@views/onboarding/components/defaultExamples';
 import { GithubExamples } from '@views/onboarding/components/githubExamples';
 
 const Onboarding = () => {
-  const [
-    RequestExampleModal,
-    toggleVisibility,
-  ] = useToggleVisibility(ModalRequestExample);
-
   const refContainer = useRef<HTMLDivElement | null>(null);
   const [
     initialTab,
@@ -29,7 +22,7 @@ const Onboarding = () => {
   }, []);
 
   return (
-    <div className="disable-vertical-scroll grid h-screen grid-rows-[auto_1fr] justify-center">
+    <div className="disable-vertical-scroll m-auto grid w-1/2 grid-rows-[auto_1fr]">
       <h1
         className={cn(
           'pb-4',
@@ -43,9 +36,11 @@ const Onboarding = () => {
       <PDLink
         to="/code"
         className={cn(
+          'cursor-pointer',
           'absolute right-20 top-0',
           'mt-1 px-3 py-4',
           'font-geist font-body1-bold',
+          'duration-200 hover:text-dev-pink-500',
         )}
       >
         Skip
@@ -58,20 +53,13 @@ const Onboarding = () => {
         tabsClassName="mb-10 p-1"
         unmountOnHide={false}
       >
-        <div
-          className="flex flex-col"
-          data-title="Default"
-        >
-          <DefaultExamples toggleVisibility={toggleVisibility} />
+        <div data-title="Default">
+          <DefaultExamples />
         </div>
-        <div
-          className="px-16"
-          data-title="Custom"
-        >
+        <div data-title="Custom">
           <GithubExamples />
         </div>
       </Tabs>
-      <RequestExampleModal onClose={toggleVisibility} />
     </div>
   );
 };