From e7868b7c159a65d36fb4a20253f8a2021588cd9b Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Thu, 24 Oct 2024 20:46:41 -0400
Subject: [PATCH 1/9] drop-down-wrapper

---
 src/App.jsx                 | 21 ++++++++++++---------
 src/components/Dropdown.jsx | 26 +++++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index db1322a..5f59ad3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,16 @@
-
 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="#conversation"> Conversation </a>
+      </Dropdown>
+    </div>
+  );
+};
 
-export default App
+export default App;
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index b4afa60..72b9cd1 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -1 +1,25 @@
-// TODO (Togzhan & Yi & Aryaa): Create a dropdown component
\ No newline at end of file
+import React, { useState } from 'react';
+
+//use isOpen to keep track of whether the dropdown menu is visible
+const Dropdown = ({ label, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div 
+      className="relative inline-block text-left"
+      //use onMouseEnter and onMouseLeave to track the mouse
+      //If the mouse is on the menu, turn state to true, otherwise false
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
+      <button className="dropdown-button">{label}</button>
+      {isOpen && (
+        <div className="absolute left-0">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

From 91152db4bf17992b0bced188a2bb44dd9ed89eef Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Thu, 24 Oct 2024 20:49:52 -0400
Subject: [PATCH 2/9] drop-down-wrapper

---
 src/components/Dropdown.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 72b9cd1..4554181 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -6,15 +6,15 @@ const Dropdown = ({ label, children }) => {
 
   return (
     <div 
-      className="relative inline-block text-left"
+      class="relative inline-block text-left"
       //use onMouseEnter and onMouseLeave to track the mouse
       //If the mouse is on the menu, turn state to true, otherwise false
       onMouseEnter={() => setIsOpen(true)}
       onMouseLeave={() => setIsOpen(false)}
     >
-      <button className="dropdown-button">{label}</button>
+      <button class="dropdown-button">{label}</button>
       {isOpen && (
-        <div className="absolute left-0">
+        <div class="absolute left-0">
           {children}
         </div>
       )}

From fa951a44650d52b2cdcb8255931b12209862608e Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Thu, 24 Oct 2024 21:03:21 -0400
Subject: [PATCH 3/9] drop-down-wrapper

---
 src/components/Dropdown.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 4554181..9d1d299 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -6,7 +6,7 @@ const Dropdown = ({ label, children }) => {
 
   return (
     <div 
-      class="relative inline-block text-left"
+      class="absolute inline-block"
       //use onMouseEnter and onMouseLeave to track the mouse
       //If the mouse is on the menu, turn state to true, otherwise false
       onMouseEnter={() => setIsOpen(true)}
@@ -14,7 +14,7 @@ const Dropdown = ({ label, children }) => {
     >
       <button class="dropdown-button">{label}</button>
       {isOpen && (
-        <div class="absolute left-0">
+        <div class="absolute">
           {children}
         </div>
       )}

From d55b0d39712b5d1e80354a8e940387d1989d507f Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Thu, 24 Oct 2024 21:57:44 -0400
Subject: [PATCH 4/9] drop-down-wrapper

---
 src/App.jsx                 | 1 +
 src/components/Dropdown.jsx | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5f59ad3..1506075 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ const App = () => {
     <div>
       <Dropdown label="More">
         <a href="#level5"> Level 5 </a>
+        <a href="#level6"> Level 6 </a>
         <a href="#conversation"> Conversation </a>
       </Dropdown>
     </div>
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 9d1d299..d24c1c3 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -10,11 +10,16 @@ const Dropdown = ({ label, children }) => {
       //use onMouseEnter and onMouseLeave to track the mouse
       //If the mouse is on the menu, turn state to true, otherwise false
       onMouseEnter={() => setIsOpen(true)}
-      onMouseLeave={() => setIsOpen(false)}
+      onMouseLeave={() => {
+        // Set a 1-second delay before closing the menu
+        timeoutId = setTimeout(() => {
+          setIsOpen(false);
+        }, 1000);
+      }}
     >
       <button class="dropdown-button">{label}</button>
       {isOpen && (
-        <div class="absolute">
+        <div class="absolute text-right">
           {children}
         </div>
       )}

From e62fd5615e196438969d7fa2a752f152b2a000cb Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Sat, 26 Oct 2024 15:46:12 -0400
Subject: [PATCH 5/9] drop-down-wrapper

---
 src/App.jsx                 |  2 +-
 src/components/Dropdown.jsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1506075..d0c5e91 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,7 +7,7 @@ const App = () => {
     <div>
       <Dropdown label="More">
         <a href="#level5"> Level 5 </a>
-        <a href="#level6"> Level 6 </a>
+        <a href="#level5"> Level 5 </a>
         <a href="#conversation"> Conversation </a>
       </Dropdown>
     </div>
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index d24c1c3..35b1571 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 
-//use isOpen to keep track of whether the dropdown menu is visible
 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"
       //use onMouseEnter and onMouseLeave to track the mouse
       //If the mouse is on the menu, turn state to true, otherwise false
@@ -17,9 +18,10 @@ const Dropdown = ({ label, children }) => {
         }, 1000);
       }}
     >
-      <button class="dropdown-button">{label}</button>
+      <button class="dropdown-button text-right">{label}</button>
       {isOpen && (
-        <div class="absolute text-right">
+        // style below for children
+        <div class="absolute text-right flex flex-col"> 
           {children}
         </div>
       )}
@@ -28,3 +30,5 @@ const Dropdown = ({ label, children }) => {
 };
 
 export default Dropdown;
+
+

From 3ec172e382122c389d90d7d7dbf0ef068410c7e3 Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Sun, 27 Oct 2024 20:38:55 -0400
Subject: [PATCH 6/9] drop-down-wrapper

---
 src/components/Dropdown.jsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 35b1571..5dd55fd 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -10,13 +10,23 @@ const Dropdown = ({ label, children }) => {
       class="absolute inline-block"
       //use onMouseEnter and onMouseLeave to track the mouse
       //If the mouse is on the menu, turn state to true, otherwise false
-      onMouseEnter={() => setIsOpen(true)}
-      onMouseLeave={() => {
-        // Set a 1-second delay before closing the menu
-        timeoutId = setTimeout(() => {
-          setIsOpen(false);
-        }, 1000);
-      }}
+      onClick={() => {
+          if(isOpen) {
+            setIsOpen(false);
+          } else{
+            setIsOpen(true);
+          }
+        }
+      }
+      // if (isOpen ) {
+      //   onclick={() => setIsOpen(false)}
+      //   // onMouseLeave={() => {
+      //   //   // Set a 1-second delay before closing the menu
+      //   //   timeoutId = setTimeout(() => {
+      //   //     setIsOpen(false);
+      //   //   }, 1000);
+      //   // }}
+      // }
     >
       <button class="dropdown-button text-right">{label}</button>
       {isOpen && (

From 21a28cdc7fbf58f3ac843f8b09a052b10c7aa2d5 Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Sun, 27 Oct 2024 20:39:49 -0400
Subject: [PATCH 7/9] drop-down-wrapper

---
 src/components/Dropdown.jsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 5dd55fd..323603a 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -8,7 +8,7 @@ const Dropdown = ({ label, children }) => {
     <div 
       // style below for menu
       class="absolute inline-block"
-      //use onMouseEnter and onMouseLeave to track the mouse
+      
       //If the mouse is on the menu, turn state to true, otherwise false
       onClick={() => {
           if(isOpen) {
@@ -18,15 +18,6 @@ const Dropdown = ({ label, children }) => {
           }
         }
       }
-      // if (isOpen ) {
-      //   onclick={() => setIsOpen(false)}
-      //   // onMouseLeave={() => {
-      //   //   // Set a 1-second delay before closing the menu
-      //   //   timeoutId = setTimeout(() => {
-      //   //     setIsOpen(false);
-      //   //   }, 1000);
-      //   // }}
-      // }
     >
       <button class="dropdown-button text-right">{label}</button>
       {isOpen && (

From 997e2a0a777ec3ba61523a1a85e652cb36e2e77d Mon Sep 17 00:00:00 2001
From: Yi Gu <2962915100@qq.com.com>
Date: Sun, 27 Oct 2024 20:40:55 -0400
Subject: [PATCH 8/9] drop-down-wrapper

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index d0c5e91..fcc9f83 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,7 +7,7 @@ const App = () => {
     <div>
       <Dropdown label="More">
         <a href="#level5"> Level 5 </a>
-        <a href="#level5"> Level 5 </a>
+        <a href="#level5"> Level 6 </a>
         <a href="#conversation"> Conversation </a>
       </Dropdown>
     </div>

From dadc13a2524032e01c845999f7bdf36cdb0781c9 Mon Sep 17 00:00:00 2001
From: Aryaa Modi <aryaamodi@Aryaas-MacBook-Air.local>
Date: Sat, 2 Nov 2024 15:44:45 -0400
Subject: [PATCH 9/9] changed class to className

---
 src/components/Dropdown.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
index 323603a..37869ca 100644
--- a/src/components/Dropdown.jsx
+++ b/src/components/Dropdown.jsx
@@ -7,7 +7,7 @@ const Dropdown = ({ label, children }) => {
   return (
     <div 
       // style below for menu
-      class="absolute inline-block"
+      className="absolute inline-block"
       
       //If the mouse is on the menu, turn state to true, otherwise false
       onClick={() => {
@@ -19,10 +19,10 @@ const Dropdown = ({ label, children }) => {
         }
       }
     >
-      <button class="dropdown-button text-right">{label}</button>
+      <button className="dropdown-button text-right">{label}</button>
       {isOpen && (
         // style below for children
-        <div class="absolute text-right flex flex-col"> 
+        <div className="absolute text-right flex flex-col"> 
           {children}
         </div>
       )}