split custom hooks components to every one to his own page url and co…

…meback to catpuccin theme
No0ne003 · May 7, 2024 · ba9b462 · ba9b462
1 parent 581ba3c
commit ba9b462
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 88 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -22,7 +22,9 @@ import { SearchAutoComplete } from "./pages/SearchAutoComplete/SearchAutoComplet
 import { TicTacToe } from "./pages/TicTacToe";
 import FeatureFlagGlobalState from "./pages/Feature-flag/context/FeatureFlagsContext";
 import { FeatureFlags } from "./pages/Feature-flag/FeatureFlags";
-import CustomHooks from "./pages/CustomHooks/CustomHooks";
+import UseFetchHookTest from "./pages/CustomHooks/use-fetch/test";
+import UseOnClickOutsideTest from "./pages/CustomHooks/use-outside-click/test";
+import { UseWindowResizeTest } from "./pages/CustomHooks/use-window-resize/test";
 
 function App() {
   return (
@@ -74,8 +76,12 @@ function App() {
               </FeatureFlagGlobalState>
             }
           />
-          {/* Custom Hooks */}
-          <Route path="custom-hooks" element={<CustomHooks />} />
+          {/* useFetch */}
+          <Route path='use-fetch' element={<UseFetchHookTest />} />
+          {/* useOutsideClick */}
+          <Route path="use-outside-click" element={<UseOnClickOutsideTest />} />
+          {/* useWindowResize */}
+          <Route path="use-window-resize" element={<UseWindowResizeTest />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

diff --git a/src/data/projects.js b/src/data/projects.js
@@ -2,77 +2,89 @@ export const projects = [
   {
     id: 1,
     name: "Accordion",
-    path: 'accordion'
+    path: "accordion",
   },
   {
     id: 2,
     name: "Random Color Generator",
-    path: 'color-generator'
+    path: "color-generator",
   },
   {
     id: 3,
     name: "Star Rating",
-    path: 'star-rating'
+    path: "star-rating",
   },
   {
     id: 4,
     name: "Image Slider",
-    path: 'image-slider'
+    path: "image-slider",
   },
   {
     id: 5,
     name: "Load More Button",
-    path: 'load-more-data'
+    path: "load-more-data",
   },
   {
     id: 6,
     name: "Tree View",
-    path: 'tree-view'
+    path: "tree-view",
   },
   {
     id: 7,
     name: "QR Code Generator",
-    path: 'qr-code-generator'
+    path: "qr-code-generator",
   },
   {
     id: 8,
-    name: 'Light Dark Mode',
-    path: 'light-dark-mode',
+    name: "Light Dark Mode",
+    path: "light-dark-mode",
   },
   {
     id: 9,
-    name: 'Custom Tabs',
-    path: 'custom-tabs',
+    name: "Custom Tabs",
+    path: "custom-tabs",
   },
   {
     id: 10,
-    name: 'Modal Popup',
-    path: 'modal-popup',
+    name: "Modal Popup",
+    path: "modal-popup",
   },
   {
     id: 11,
-    name: 'Github Profile Finder',
-    path: 'github-profile-finder',
+    name: "Github Profile Finder",
+    path: "github-profile-finder",
   },
   {
     id: 12,
-    name: 'Search Auto-Complete',
-    path: 'search-auto-complete'
+    name: "Search Auto-Complete",
+    path: "search-auto-complete",
   },
   {
     id: 13,
-    name: 'Tic Tac Toe',
-    path: 'tic-tac-toe'
+    name: "Tic Tac Toe",
+    path: "tic-tac-toe",
   },
   {
     id: 14,
-    name: 'Feature Flags',
-    path: 'feature-flags',
+    name: "Feature Flags",
+    path: "feature-flags",
   },
   {
     id: 15,
-    name: 'Custom Hooks',
-    path: 'custom-hooks'
-  }
+    name: "useFetch",
+    path: "use-fetch",
+    tags: ["custom hooks"],
+  },
+  {
+    id: 16,
+    name: "useOutsideClick",
+    path: "use-outside-click",
+    tags: ["custom hooks"],
+  },
+  {
+    id: 17,
+    name: "useWindowResize",
+    path: "use-window-resize",
+    tags: ["custom hooks"],
+  },
 ];
-
diff --git a/src/index.css b/src/index.css
@@ -6,48 +6,48 @@
 
 @layer base {
   :root {
-    --background: 48 87% 95%;
-    --foreground: 20 5% 22%;
-    --muted: 3 59% 81%;
-    --muted-foreground: 28 11% 44%;
-    --popover: 30 12% 70%;
-    --popover-foreground: 28 11% 34%;
-    --card: 30 12% 70%;
-    --card-foreground: 28 11% 44%;
-    --border: 30 12% 70%;
-    --input: 30 12% 70%;
-    --primary: 333 34% 54%;
-    --primary-foreground: 323 39% 20%;
-    --secondary: 40 73% 49%;
-    --secondary-foreground: 37 80% 20%;
-    --accent: 24 88% 45%;
-    --accent-foreground: 19 97% 20%;
-    --destructive: 2 75% 46%;
-    --destructive-foreground: 358, 100%, 31%;
-    --ring: 28 11% 44%;
-    --radius: 0rem;
+    --background: 220 23.077% 94.902%;
+    --foreground: 233.793 16.022% 35.49%;
+    --muted: 222.857 15.909% 82.745%;
+    --muted-foreground: 233.333 12.796% 41.373%;
+    --popover: 220 23.077% 94.902%;
+    --popover-foreground: 233.793 16.022% 35.49%;
+    --card: 220 23.077% 94.902%;
+    --card-foreground: 233.793 16.022% 35.49%;
+    --border: 225 13.559% 76.863%;
+    --input: 225 13.559% 76.863%;
+    --primary: 266.044 85.047% 58.039%;
+    --primary-foreground: 220 23.077% 94.902%;
+    --secondary: 222.857 15.909% 82.745%;
+    --secondary-foreground: 233.793 16.022% 35.49%;
+    --accent: 222.857 15.909% 82.745%;
+    --accent-foreground: 233.793 16.022% 35.49%;
+    --destructive: 347.077 86.667% 44.118%;
+    --destructive-foreground: 220 21.951% 91.961%;
+    --ring: 233.793 16.022% 35.49%;
+    --radius: 0.5rem;
   }
 
   .dark {
-    --background: 0 0% 16%;
-    --foreground: 43 59% 81%;
-    --muted: 30 9% 23%;
-    --muted-foreground: 46 6% 61%;
-    --popover: 30 7% 23%;
-    --popover-foreground: 35 17% 60%;
-    --card: 30 9% 23%;
-    --card-foreground: 35 17% 59%;
-    --border: 30 9% 23%;
-    --input: 30 9% 23%;
-    --primary: 333 42% 54%;
-    --primary-foreground: 344 47% 88%;
-    --secondary: 40 73% 49%;
-    --secondary-foreground: 42 95% 88%;
-    --accent: 24 88% 45%;
-    --accent-foreground: 27 99% 80%;
-    --destructive: 355 64% 47%;
-    --destructive-foreground: 356 88% 88%;
-    --ring: 35 17% 59%;
+    --background: 240 21.053% 14.902%;
+    --foreground: 226.154 63.934% 88.039%;
+    --muted: 236.842 16.239% 22.941%;
+    --muted-foreground: 226.667 35.294% 80%;
+    --popover: 240 21.053% 14.902%;
+    --popover-foreground: 226.154 63.934% 88.039%;
+    --card: 240 21.053% 14.902%;
+    --card-foreground: 226.154 63.934% 88.039%;
+    --border: 234.286 13.208% 31.176%;
+    --input: 234.286 13.208% 31.176%;
+    --primary: 267.407 83.505% 80.98%;
+    --primary-foreground: 240 21.053% 14.902%;
+    --secondary: 236.842 16.239% 22.941%;
+    --secondary-foreground: 226.154 63.934% 88.039%;
+    --accent: 236.842 16.239% 22.941%;
+    --accent-foreground: 226.154 63.934% 88.039%;
+    --destructive: 343.269 81.25% 74.902%;
+    --destructive-foreground: 240 21.311% 11.961%;
+    --ring: 226.154 63.934% 88.039%;
     --radius: 0rem;
   }
 }
@@ -99,8 +99,7 @@
     background:
       linear-gradient(theme(colors.foreground) 0 0) 0 0/8px 20px,
       linear-gradient(theme(colors.foreground) 0 0) 100% 0/8px 20px,
-      radial-gradient(farthest-side, theme(colors.foreground) 90%, #0000) 0 5px/8px
-        8px content-box,
+      radial-gradient(farthest-side, theme(colors.foreground) 90%, #0000) 0 5px/8px 8px content-box,
       theme(colors.transparent);
     background-repeat: no-repeat;
     animation: l3 2s infinite linear;

diff --git a/src/pages/CustomHooks/CustomHooks.jsx b/src/pages/CustomHooks/CustomHooks.jsx
diff --git a/src/pages/CustomHooks/use-outside-click/test.jsx b/src/pages/CustomHooks/use-outside-click/test.jsx
@@ -8,7 +8,7 @@ const UseOnClickOutsideTest = () => {
   useOutsideClick(ref, () => setShowContent(false));
 
   return (
-    <div>
+    <div className="flex justify-center items-center">
       {showContent ? (
         <div
           ref={ref}

diff --git a/src/pages/CustomHooks/use-window-resize/test.jsx b/src/pages/CustomHooks/use-window-resize/test.jsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export const UseWindowResizeTest = () => {
   return (
     <div>UseWindowResizeTest</div>

diff --git a/src/pages/tree-view/custom-tabs/Tabs.jsx b/src/pages/tree-view/custom-tabs/Tabs.jsx
@@ -9,11 +9,11 @@ export const Tabs = ({ tabsContent, onChange }) => {
   }
 
   return (
-    <div className="flex flex-col justify-start items-center w-fit mx-auto bg-gr">
-      <div className="flex w-fit">
+    <div className="flex flex-col justify-start items-center w-fit mx-auto border-border border-2">
+      <div className="flex w-fit ">
         {tabsContent.map((tabItem, index) => (
           <div
-            className={`cursor-pointer hover:bg-card px-5 py-3 font-mono w-[100px] ${currentTabIndex === index ? 'bg-card' : 'bg-card/50'}`}
+            className={`cursor-pointer hover:bg-card px-5 py-3 font-mono w-[100px] ${currentTabIndex === index ? 'bg-card' : 'bg-secondary/30'}`}
             onClick={() => handleOnClick(index)}
             key={tabItem.label}
           >