Drop down wrapper

src/App.jsx

@@ -1,13 +1,17 @@
-
 import './App.css'
-import Home from './pages/Home'
+import React from 'react';
+import Dropdown from './components/Dropdown'
 
-function App() {
+const App = () => {
   return (
-    <>
-      <Home />
-    </>
-  )
-}
+    <div>
+      <Dropdown label="More">
+        <a href="#level5"> Level 5 </a>
+        <a href="#level5"> Level 6 </a>
+        <a href="#conversation"> Conversation </a>
+      </Dropdown>
+    </div>
+  );
+};
 
-export default App
+export default App;

src/components/Dropdown.jsx

@@ -1 +1,35 @@
-// TODO (Togzhan & Yi & Aryaa): Create a dropdown component
+import React, { useState } from 'react';
+
+const Dropdown = ({ label, children }) => {
+  //use isOpen to keep track of whether the dropdown menu is visible
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div 
+      // style below for menu
+      class="absolute inline-block"
+
+      //If the mouse is on the menu, turn state to true, otherwise false
+      onClick={() => {
+          if(isOpen) {
+            setIsOpen(false);
+          } else{
+            setIsOpen(true);
+          }
+        }
+      }
+    >
+      <button class="dropdown-button text-right">{label}</button>
+      {isOpen && (
+        // style below for children
+        <div class="absolute text-right flex flex-col"> 
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
+
+