diff --git a/src/App.jsx b/src/App.jsx index 8fba2fa..4cb4497 100644 --- 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() { } /> - {/* Custom Hooks */} - } /> + {/* useFetch */} + } /> + {/* useOutsideClick */} + } /> + {/* useWindowResize */} + } /> {/* Error Page */} } /> diff --git a/src/data/projects.js b/src/data/projects.js index 9b0d3e6..0460a4b 100644 --- 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 index bc6d9d0..b93de65 100644 --- 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 deleted file mode 100644 index fbcf0bb..0000000 --- a/src/pages/CustomHooks/CustomHooks.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import UseFetchHookTest from "./use-fetch/test"; -import UseOnClickOutsideTest from "./use-outside-click/test"; - -const CustomHooks = () => { - return ( -
- - -
- ); -}; - -export default CustomHooks; diff --git a/src/pages/CustomHooks/use-outside-click/test.jsx b/src/pages/CustomHooks/use-outside-click/test.jsx index 568af03..f908ffe 100644 --- 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 ( -
+
{showContent ? (
{ return (
UseWindowResizeTest
diff --git a/src/pages/tree-view/custom-tabs/Tabs.jsx b/src/pages/tree-view/custom-tabs/Tabs.jsx index d3c1a7e..683bc9e 100644 --- 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 ( -
-
+
+
{tabsContent.map((tabItem, index) => (
handleOnClick(index)} key={tabItem.label} >