finishing accordion and add colorshemic to the website (catppuchin)

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",

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 (
  <ThemeProvider defaultTheme="system" storageKey="ui-theme">
  <Header />
  <Routes>
- <Route path='React-Project'>
- <Route index element={<Home />} />
+ <Route path="React-Project">
+ <Route index element={<Home />} /> 
+ {/* Accordion component */}
+ <Route path="accordion" element={<Accordion />} />
+
+ {/* Error Page */}
  <Route path="*" element={<NotFound />} />
  </Route>
  </Routes>
  </ThemeProvider>
- )
+ );
 }
 
-export default App
+export default App;

src/index.css

@@ -1,69 +1,84 @@
-@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;
 @tailwind utilities;
 
 @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;
  }
 }
 
 @layer base {
  * {
  @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;
  }
 }

src/pages/404.jsx

@@ -1,16 +1,12 @@
-
 function NotFound() {
-
  return (
  <div className="flex items-center justify-center flex-1 space-x-4">
  <div className="text-4xl font-bold border-r-2 border-primary pr-4 font-mono">
  404
  </div>
- <div className="text-lg">
- Not Found
- </div>
+ <div className="text-lg">Not Found</div>
  </div>
- )
+ );
 }
 
-export default NotFound;
+export default NotFound;

src/pages/Home.jsx

@@ -1,11 +1,10 @@
-
-
 function Home() {
  return (
- <>
- <h1>Home</h1>
- </>
- )
+ <div className="flex flex-col gap-3 justify-start items-center">
+ <p className="text-xl">this page under <span className="font-bold text-primary">development</span></p> 
+ <p className="text-neutral-500 text-xs">I&apos;ll start on it when add the first componenet (project)</p>
+ </div>
+ );
 }
 
-export default Home
+export default Home;

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 (
+ <div className="container flex flex-1 flex-col items-center justify-center gap-8 my-10">
+ <Button
+ variant="secondary"
+ onClick={() => setEnableMultiSelection(!enableMultiSelection)}
+ >
+ Toggle Multi Selection
+ </Button>
+ <div className="w-[500px] bg-gr backdrop-blur-3xl border-border border-2 space-y-5">
+ {data && data.length > 0 ? (
+ data.map((dataItem) => (
+ <div key={dataItem.id}>
+ <div
+ onClick={
+ enableMultiSelection
+ ? () => handleMultiSelection(dataItem.id)
+ : () => handleSingleSelection(dataItem.id)
+ }
+ className="flex justify-between items-center cursor-pointer py-[10px] px-[15px] transition-all"
+ >
+ <h3
+ className={`font-mono transition-all ${selected === dataItem.id || multiple.indexOf(dataItem.id) !== -1 ? "font-bold" : ""}`}
+ >
+ {dataItem.question}
+ </h3>
+ <span className="size-5 flex justify-center items-center transition-all">
+ {dataItem.id === selected ||
+ multiple.indexOf(dataItem.id) !== -1
+ ? "-"
+ : "+"}
+ </span>
+ </div>
+ {selected === dataItem.id ||
+ multiple.indexOf(dataItem.id) !== -1 ? (
+ <div className="h-auto py-[10px] px-[15px] border-b-border transition-all">
+ {dataItem.answer}
+ </div>
+ ) : null}
+ </div>
+ ))
+ ) : (
+ <div>No Data found !</div>
+ )}
+ </div>
+ </div>
+ );
+}

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;