diff --git a/package-lock.json b/package-lock.json index 22c138e..0a11084 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "reactprojects", "version": "0.0.0", "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.0.2", @@ -1064,6 +1065,37 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-arrow": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", @@ -1087,6 +1119,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", diff --git a/package.json b/package.json index dc4f4ff..4f2f980 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.0.2", diff --git a/src/App.jsx b/src/App.jsx index 2c81129..37cbd1f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,24 +1,28 @@ -import { ThemeProvider } from "@/components/theme-provider" -import { Route, Routes } from "react-router-dom" +import { ThemeProvider } from "@/components/theme-provider"; +import { Route, Routes } from "react-router-dom"; // Layouts -import Header from "@/layouts/header" +import Header from "@/layouts/header"; // Pages -import Home from "@/pages/Home" -import NotFound from '@/pages/404' +import Home from "@/pages/Home"; +import NotFound from "@/pages/404"; +import Accordion from "@/pages/accordion/accordion"; function App() { - - return( + return (
- - } /> + + } /> + {/* Accordion component */} + } /> + + {/* Error Page */} } /> - ) + ); } -export default App +export default App; diff --git a/src/data/projects.js b/src/data/projects.js new file mode 100644 index 0000000..e69de29 diff --git a/src/index.css b/src/index.css index 1ffb80a..8f88b9d 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Micro+5&display=swap"); @tailwind base; @tailwind components; @@ -6,48 +6,49 @@ @layer base { :root { - --background: 0 0% 100%; - --foreground: 224 71.4% 4.1%; - --card: 0 0% 100%; - --card-foreground: 224 71.4% 4.1%; - --popover: 0 0% 100%; - --popover-foreground: 224 71.4% 4.1%; - --primary: 262.1 83.3% 57.8%; - --primary-foreground: 210 20% 98%; - --secondary: 220 14.3% 95.9%; - --secondary-foreground: 220.9 39.3% 11%; - --muted: 220 14.3% 95.9%; - --muted-foreground: 220 8.9% 46.1%; - --accent: 220 14.3% 95.9%; - --accent-foreground: 220.9 39.3% 11%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 20% 98%; - --border: 220 13% 91%; - --input: 220 13% 91%; - --ring: 262.1 83.3% 57.8%; + --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: 230.935 97.203% 71.961%; + --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: 0rem; } .dark { - --background: 224 71.4% 4.1%; - --foreground: 210 20% 98%; - --card: 224 71.4% 4.1%; - --card-foreground: 210 20% 98%; - --popover: 224 71.4% 4.1%; - --popover-foreground: 210 20% 98%; - --primary: 263.4 70% 50.4%; - --primary-foreground: 210 20% 98%; - --secondary: 215 27.9% 16.9%; - --secondary-foreground: 210 20% 98%; - --muted: 215 27.9% 16.9%; - --muted-foreground: 217.9 10.6% 64.9%; - --accent: 215 27.9% 16.9%; - --accent-foreground: 210 20% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 20% 98%; - --border: 215 27.9% 16.9%; - --input: 215 27.9% 16.9%; - --ring: 263.4 70% 50.4%; + --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: 231.892 97.368% 85.098%; + --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; } } @@ -55,15 +56,29 @@ * { @apply border-border; } + + *::-webkit-scrollbar { + @apply w-1 bg-neutral-900 + } + *::-webkit-scrollbar-thumb { + @apply bg-accent + } + body { @apply bg-background text-foreground; } + #root { - @apply h-screen w-screen flex flex-col + @apply h-screen w-screen flex flex-col overflow-x-hidden; } } + @layer components { .focusing { - @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring + @apply focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring; + } + + .bg-gr { + @apply bg-gradient-to-br from-primary-foreground to-secondary; } } diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 8f28ff4..06461fb 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,16 +1,12 @@ - function NotFound() { - return (
404
-
- Not Found -
+
Not Found
- ) + ); } -export default NotFound; \ No newline at end of file +export default NotFound; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 5fb3709..33aef9f 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,11 +1,10 @@ - - function Home() { return ( - <> -

Home

- - ) +
+

this page under development

+

I'll start on it when add the first componenet (project)

+
+ ); } -export default Home \ No newline at end of file +export default Home; diff --git a/src/pages/accordion/accordion.jsx b/src/pages/accordion/accordion.jsx new file mode 100644 index 0000000..87ac6b0 --- /dev/null +++ b/src/pages/accordion/accordion.jsx @@ -0,0 +1,70 @@ +import { useState } from "react"; +import data from "./data"; +import { Button } from "@/components/ui/button"; + +export default function Accordion() { + const [selected, setSelected] = useState(null); + const [enableMultiSelection, setEnableMultiSelection] = useState(false); + const [multiple, setMultiple] = useState([]); + + function handleSingleSelection(getCurrentId) { + setSelected(getCurrentId === selected ? null : getCurrentId); + } + + function handleMultiSelection(getCurrentId) { + let cpyMultiple = [...multiple]; + const findIndexOfCurrentId = cpyMultiple.indexOf(getCurrentId); + + if (findIndexOfCurrentId === -1) cpyMultiple.push(getCurrentId); + else cpyMultiple.splice(findIndexOfCurrentId, 1); + + setMultiple(cpyMultiple); + } + + return ( +
+ +
+ {data && data.length > 0 ? ( + data.map((dataItem) => ( +
+
handleMultiSelection(dataItem.id) + : () => handleSingleSelection(dataItem.id) + } + className="flex justify-between items-center cursor-pointer py-[10px] px-[15px] transition-all" + > +

+ {dataItem.question} +

+ + {dataItem.id === selected || + multiple.indexOf(dataItem.id) !== -1 + ? "-" + : "+"} + +
+ {selected === dataItem.id || + multiple.indexOf(dataItem.id) !== -1 ? ( +
+ {dataItem.answer} +
+ ) : null} +
+ )) + ) : ( +
No Data found !
+ )} +
+
+ ); +} diff --git a/src/pages/accordion/data.js b/src/pages/accordion/data.js new file mode 100644 index 0000000..3cde5ff --- /dev/null +++ b/src/pages/accordion/data.js @@ -0,0 +1,28 @@ +const data = [ + { + id: "1", + question: "What are accordion components?", + answer: + "Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.", + }, + { + id: "2", + question: "What are they used for?", + answer: + "They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.", + }, + { + id: "3", + question: "Accordion as a musical instrument", + answer: + "The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.", + }, + { + id: "4", + question: "Can I create an accordion component with a different framework?", + answer: + "Yes of course, it is very possible to create an accordion component with another framework.", + }, +]; + +export default data; diff --git a/tailwind.config.js b/tailwind.config.js index c4db5f1..75e332a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ export default { content: [ './index.html', './pages/*.{js,jsx}', + './pages/**/*.{js,jsx}', './components/**/*.{js,jsx}', './src/**/*.{js,jsx}', ], @@ -66,7 +67,7 @@ export default { }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, + to: { height: "100px" }, }, }, animation: { @@ -79,4 +80,4 @@ export default { }, }, plugins: [tailwindCssAnimate], -} \ No newline at end of file +}