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 (
+
+
setEnableMultiSelection(!enableMultiSelection)}
+ >
+ Toggle Multi Selection
+
+
+ {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
+}