Drop down

src/App.js

@@ -11,6 +11,9 @@ import { Badge } from "./pages/Badge";
 import ButtonDoc from "./pages/ButtonDoc";
 import {ModalPage} from "./pages/ModalPage";
 import {FooterPage} from "./pages/FooterPage";
+import { AccordionPage } from "./pages/AccordionPage";
+import { LoginPage } from "./pages/LoginPage";
+import { DropDownMenuPage } from "./pages/DropDwonMenuPage";
 
 function App() {
   return (
@@ -29,6 +32,9 @@ function App() {
               <Route path="/card" element={<Card />} />
               <Route path="/Alert" element={<Alert />} />
               <Route path="/Badge" element={<Badge />} />
+              <Route path="/accordion" element={<AccordionPage/>} />
+              <Route path="/login" element={<LoginPage/>} />
+              <Route path="/drop-down" element={<DropDownMenuPage/>} />
             </Routes>
           </div>
         </div>

src/components/DropDownMenu/DropDownMenu.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import './DropdownMenu.css';
+
+const DropdownMenu = ({ options, onSelect }) => {
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const handleOptionClick = (option) => {
+    setSelectedOption(option);
+    onSelect(option);
+    closeDropdown();
+  };
+
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const closeDropdown = () => {
+    setIsDropdownOpen(false);
+  };
+
+  return (
+    <div className="dropdown-container">
+      <div className="selected-option" onClick={toggleDropdown}>
+        {selectedOption ? selectedOption.label : 'Select an option'}
+      </div>
+      {isDropdownOpen && (
+        <ul className="options-list">
+          {options.map((option) => (
+            <li key={option.value} onClick={() => handleOptionClick(option)}>
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default DropdownMenu;

src/components/DropDownMenu/DropdownMenu.css

@@ -0,0 +1,34 @@
+.dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .selected-option {
+    cursor: pointer;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .options-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .options-list li {
+    padding: 8px;
+    cursor: pointer;
+  }
+
+  .options-list li:hover {
+    background-color: #f0f0f0;
+  }

src/components/NavigationLeft.jsx

@@ -14,6 +14,11 @@ export const NavigationLeft = () => {
                 <NavLink className="navlink" to="/card" >Card</NavLink>
                 <NavLink className="navlink" to="/alert" >Alert</NavLink>
                 <NavLink className="navlink" to="/badge" >Badge</NavLink>
+                <NavLink className="navlink" to="/accordion" >Accordion</NavLink>
+                <NavLink className="navlink" to="/login" >Login</NavLink>
+                <NavLink className="navlink" to="/drop-down" >Dropdown Menu</NavLink>
+
+
                 <p>more add below</p>
             </div>
         </>

src/pages/AccordionPage.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+import Accordion from "../components/Accordion";
+
+export const AccordionPage = () => {
+
+const accordionItems = [
+    { title: "Section 1", content: "Content for Section 1" },
+    { title: "Section 2", content: "Content for Section 2" },
+  ];
+    return (
+        <>
+  <Accordion items={accordionItems} />
+        </>
+    )
+}

src/pages/DropDwonMenuPage.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import DropdownMenu from "../components/DropDownMenu/DropDownMenu";
+
+export const DropDownMenuPage = () => {
+    const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ];
+      const handleSelect = (selectedOption) => {
+        console.log('Selected option:', selectedOption);
+      };
+
+    return (
+
+        <>
+         <div>
+      <h1>Dropdown resubale Menu</h1>
+      <DropdownMenu options={options} onSelect={handleSelect} />
+    </div>
+        </>
+    )
+}

src/pages/Homepage.jsx

@@ -1,58 +1,17 @@
 import React from "react";
-import Button from "../components/Button";
-import arrowRight from "../assets/arrow-right.svg";
-import Accordion from "../components/Accordion";
 import Modal from "../components/Modal";
 import Feature6 from "../components/TopHeader";
 import Footer from "../components/Footer";
-import Login from "../components/Login";
-import BottomNav from "../components/Bottom Nav bar/BottomNavBar";
-const accordionItems = [
-  { title: "Section 1", content: "Content for Section 1" },
-  { title: "Section 2", content: "Content for Section 2" },
-];
 
 const Homepage = () => {
   return (
-    <><div className="flex flex-col items-center space-y-4">
-      {/* Default Button */}
-      <Button>Default Button</Button>
-
-      {/* Customized Button 1 */}
-      <Button
-        iconURL={arrowRight}
-        borderColor={"border-black"}
-        textColor={"text-white"}
-        backgroundColor={"bg-black"}
-      >
-        Customized Button 1
-      </Button>
-
-      {/* Customized Button 2 */}
-      <Button
-        borderColor={"border-blue-500"}
-        textColor={"text-blue-500"}
-        backgroundColor={"bg-white"}
-      >
-        Customized Button 2
-      </Button>
-
-      {/* Customized Button 3 */}
-      <Button
-        borderColor={"border-green-500"}
-        textColor={"text-green-500"}
-        backgroundColor={"bg-white"}
-      >
-        Customized Button 3
-      </Button>
-
-      <Accordion items={accordionItems} />
-      <Login />
-      <Feature6 />
-      <Modal />
-      <Footer />
-    </div>
-    <BottomNav backUrl=" " nextUrl="/Button" backName=" " nextName="Button" /></>
+    <>
+      <div className="flex flex-col items-center space-y-4">
+        <Feature6 />
+        <Modal />
+        <Footer />
+      </div>
+    </>
   );
 };
 

src/pages/LoginPage.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import Login from "../components/Login";
+
+export const LoginPage = () => {
+
+
+    return (
+        <>
+   <Login />
+        </>
+    )
+}