Repository: tripleten-externships/communitee-golf-1
Pull request #9: [CG1-11] Implement Location Dropdown after revert
Author: login: bjthe4
Created: 2025-04-28T22:48:00Z | Merged: 2025-05-10T21:01:58Z

Description:
Built a dropdown location selector that appears after login, sitting between the logo and menu. Styled it using Tailwind CSS to match the app’s clean layout. The dropdown allows users to pick a golf course from a list, keeping the experience smooth without crowding the screen.

The dropdown is hidden until clicked and is easy to update with new course names later. Right now, it shows placeholder options ("Glory Golf Course", "Golf Course One", "Golf Course Two", "Golf Course Three"). Focused on making sure it fits naturally into the login flow without breaking the design.

Acceptance Criteria:

Dropdown sits directly under the CommuniTee logo and above the menu after user login.

Clicking the dropdown opens the full list of available courses.

Each course option is clickable (currently using dummy text for now).

Styling matches the project theme using Tailwind classes (spacing, fonts, colors).

Dropdown only shows once the user is logged in (doesn’t appear on the login form).

Easy to extend later when real course data gets added.

Jira Ticket: CG1-11


Diff:
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1326894..30d91a8 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
   ],
+  staticDirs: ['../public'],
   framework: {
     name: "@storybook/react-vite",
     options: {},
diff --git a/public/icons/dropdown-arrow.png b/public/icons/dropdown-arrow.png
new file mode 100644
index 0000000..f1d28d2
Binary files /dev/null and b/public/icons/dropdown-arrow.png differ
diff --git a/src/components/App.tsx b/src/components/App.tsx
index c8b9729..d6f829c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import { Header } from "./Header";
 import { LoginForm } from "./LoginForm";
+import { Dropdown } from "./Dropdown";
+import { useState } from "react";
 import Menu from "./Menu";
 
 export const App: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = React.useState(false);
+  const [, setSelected] = useState<string | null>(null);
 
   // forgot password function
   const handleForgot = () => {
@@ -20,6 +23,7 @@ export const App: React.FC = () => {
     }
     setIsLoggedIn(false);
   };
+  const course = ["Golf Course one", "Golf Course two", "Golf Course three"];
 
   return (
     // main styling for chrome extension
@@ -36,9 +40,19 @@ export const App: React.FC = () => {
           onForgotPassword={handleForgot}
         />
       ) : (
-        <div>Chat interface will go here
+        <>
+       <div className="mb-1 text-[12px] font-normal text-grayBorder leading-[110%]">
+ Location
+</div>
+        <Dropdown 
+          buttonText="Selected option"
+          items={course}
+          onSelect={(item) => setSelected(item)} 
+          />
+         <div>Chat interface will go here
             <Menu messages={["Bob", "Buddy"]}/>
         </div>
+        </>
       )}
       
     </div>
diff --git a/src/components/Dropdown.stories.tsx b/src/components/Dropdown.stories.tsx
new file mode 100644
index 0000000..7d48d10
--- /dev/null
+++ b/src/components/Dropdown.stories.tsx
@@ -0,0 +1,29 @@
+import { Dropdown } from "./Dropdown";
+
+interface DropdownArgs {
+  buttonText: string;
+  items: string[];
+}
+
+export default {
+  title: "Components/Dropdown",
+  component: Dropdown,
+  args: {
+    buttonText: "Selected option",
+    items: ["Golf Course one", "Golf Course two", "Golf Course three"],
+    onSelect: (item: string) => console.log("Selected:", item),
+  },
+};
+
+const Template = (args: DropdownArgs) => {
+  const { buttonText, items } = args;
+  return (
+    <Dropdown
+      buttonText={buttonText}
+      items={items}
+      onSelect={(item: string) => console.log("Selected:", item)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
new file mode 100644
index 0000000..32c9969
--- /dev/null
+++ b/src/components/Dropdown.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import {DropdownButton} from "./DropdownButton";
+import {DropdownContent} from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+
+interface DropdownProps {
+    buttonText: string;
+    onSelect?: (item: string) => void;
+    items: string[];
+  }
+
+  export const Dropdown: React.FC<DropdownProps> = ({buttonText, onSelect, items}: DropdownProps) => {
+    const [open, setOpen] = useState(false);
+    const [selectedItem, setSelectedItem] = useState<string>(buttonText || items[0]);
+
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const toggleDropdown = () => {
+        setOpen((open)=> !open);
+    };
+    
+    useEffect (() => {
+        const handler = (event: MouseEvent) => {
+            if(dropdownRef.current && ! dropdownRef.current.contains(event.target as Node)) {
+                setOpen(false);
+            }
+        };
+
+            document.addEventListener("click", handler)
+
+            return () => {
+                document.removeEventListener ("click", handler);
+        };
+    }, []);
+
+    const handleSelect = (item: string) => {
+        setSelectedItem(item);
+        onSelect?.(item);
+        setOpen(false);
+      };
+
+    return (
+        <div className="font-poppins font-regular relative flex flex-col gap-2" ref={dropdownRef}>
+            <DropdownButton toggle={toggleDropdown} open={open}>{selectedItem} </DropdownButton>
+             <DropdownContent open={open}><ul> {items.map((item) => ( <li key={item}>
+        <button
+          className="w-full text-left px-4 py-2 hover:bg-gray-100"
+          onClick={() => handleSelect(item)}
+        >
+          {item}
+        </button>
+      </li>
+    ))}
+  </ul> </DropdownContent>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/components/DropdownButton.tsx b/src/components/DropdownButton.tsx
new file mode 100644
index 0000000..d334ee5
--- /dev/null
+++ b/src/components/DropdownButton.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+interface DropdownButtonProps {
+    children: React.ReactNode;
+    open: boolean;
+    toggle: () => void;
+  }
+
+export const DropdownButton: React.FC<DropdownButtonProps> = ({children, open, toggle}) => {
+return (
+  <button
+    onClick={toggle}
+      type="button"
+      className={`w-[304px] h-[42px] flex items-center justify-between px-3 py-2 bg-white border-[1px] border-[#030303] rounded-lg text-gray-700 text-sm font-medium transition-all duration-200 
+      hover:bg-gray-100  ${open ? "shadow-md" : ""}`}
+    >
+       <span>{children}</span>
+       <img src="/icons/dropdown-arrow.png" alt="Dropdown Icons" className={`w-4 h-4 mr-2 transition-transform duration-300 ${open ? 'rotate-180' : ''}`} />
+    </button>
+);
+};
\ No newline at end of file
diff --git a/src/components/DropdownContent.tsx b/src/components/DropdownContent.tsx
new file mode 100644
index 0000000..84378f0
--- /dev/null
+++ b/src/components/DropdownContent.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface DropdownContentProps {
+    children: React.ReactNode;
+    open: boolean;
+  }
+
+  export const DropdownContent: React.FC<DropdownContentProps> = ({ children, open }) => {
+    return (
+      <div
+        className={`absolute left-0 top-full mt-2 w-[304px] bg-white rounded-[12px] border border-[#959494] shadow-md z-50 transition-all duration-200 ease-in-out transform
+          ${open ? "opacity-100 translate-y-0 visible" : "opacity-0 -translate-y-2 invisible"}`}
+      >
+        <ul className="py-2 space-y-[10px]">
+          {children}
+        </ul>
+      </div>
+    );
+  };
\ No newline at end of file
diff --git a/src/components/DropdownCourse.tsx b/src/components/DropdownCourse.tsx
new file mode 100644
index 0000000..fbc112d
--- /dev/null
+++ b/src/components/DropdownCourse.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+interface DropdownCourseProps {
+  children: React.ReactNode;
+  onClick: () => void;
+}
+
+export const DropdownCourse: React.FC<DropdownCourseProps> = ({children, onClick}) => {
+
+  return (
+<li
+  className="w-full px-3 py-2 text-sm text-gray-800 hover:bg-blue-100 rounded-md last:border-none cursor-pointer transition-all"
+  onClick={onClick}
+>
+  {children}
+</li>
+  );
+};
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index c4dc49a..8511190 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,7 @@ export default {
         bold: 700,
       },
       colors: {
+        grayBorder: "#959494",
         black: "#030303",
         white: "#ffffff",
         "alt-white": "#f5f8fa",


Reviews:
user: login: gillty1995
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-29T20:11:35Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-29T20:22:54Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-29T20:23:26Z
user: login: gillty1995
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-29T20:37:51Z
user: login: gillty1995
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-29T20:38:00Z
user: login: tomershvueli
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T19:37:54Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-03T13:09:06Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-03T13:09:56Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-05T16:03:29Z
user: login: tomershvueli
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T23:40:35Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-06T02:00:09Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-06T02:00:24Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-06T02:00:43Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-06T02:01:59Z
user: login: tomershvueli
body: Still a bit of work left to do here in the way of functionality and components. But the styles are spot-on! Good work! Implementing dropdowns from 0 is not easy. Almost there. 
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-06T02:17:07Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-07T15:52:52Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-07T15:53:22Z
user: login: bjthe4
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-08T18:15:38Z
user: login: tomershvueli
body: This is looking great! Nicely done! 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-10T21:01:51Z

Review comments:
diff_hunk: @@ -0,0 +1,62 @@
+// import React from "react";
path: src/components/yerrr
user: login: gillty1995
body: I think this might need to be removed before it can be accepted as it might be unnecessary? (the script yerr)

created_at: 2025-04-29T14:36:38Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,18 @@
+import React from "react";
+
+interface DropdownContentProps {
+    children: React.ReactNode;
+    open: boolean;
+  }
+
+export const DropdownContent: React.FC<DropdownContentProps> = ({children, open}) => {
+    return (
+        <div className={`absolute left-0 top-full mt-2 w-[304px] bg-white rounded-[12px] border border-[#959494] shadow-md transition-all duration-200 ease-in-out transform 
path: src/components/DropdownContent.tsx
user: login: gillty1995
body: I might add a z-index to the dropdown content class (something like z-50) so that it will show up above all the other components once we start nesting everything together. 
created_at: 2025-04-29T14:37:33Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,18 @@
+import React from "react";
+
+interface DropdownContentProps {
+    children: React.ReactNode;
+    open: boolean;
+  }
+
+export const DropdownContent: React.FC<DropdownContentProps> = ({children, open}) => {
+    return (
+        <div className={`absolute left-0 top-full mt-2 w-[304px] bg-white rounded-[12px] border border-[#959494] shadow-md transition-all duration-200 ease-in-out transform 
path: src/components/DropdownContent.tsx
user: login: bjthe4
body: I just made the changes and i added the z index to the dropdown content.
created_at: 2025-04-29T20:22:54Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,62 @@
+// import React from "react";
path: src/components/yerrr
user: login: bjthe4
body: I removed that script (yerr).
created_at: 2025-04-29T20:23:26Z
author_association: COLLABORATOR
path: public/icons/Icon.png
user: login: tomershvueli
body: Can we rename this something a bit more appropriate? 
created_at: 2025-05-01T19:34:39Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+import React from "react";
+import { DropdownButton } from "./DropdownButton";
+import { DropdownContent } from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+// import icons from "../../dist/icons/Icon.png"
path: src/components/Dropdown.tsx
user: login: tomershvueli
body: Remove unused line. 
created_at: 2025-05-01T19:34:52Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,22 @@
+import React from "react";
+import icons from "../../public/icons/Icon.png";
path: src/components/DropdownButton.tsx
user: login: tomershvueli
body: `icons` is not a good name for a single icon you're trying to bring in, let's be a bit more specific here. 
created_at: 2025-05-01T19:35:20Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,15 +1,34 @@
 import React from "react";
 import { LoginForm } from "./LoginForm";
+import { Dropdown } from "./Dropdown";
+import { DropdownCourse } from "./DropdownCourse";
 
 export const App: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = React.useState(false);
-
+  const course = ["one", "two", "three"];
   return (
     <div className="w-96 h-96 bg-white p-4">
       {!isLoggedIn ? (
         <LoginForm onLogin={() => setIsLoggedIn(true)} />
       ) : (
+        <>
+      <div className="mb-1 text-[12px] font-normal text-[#959494] leading-[110%]">
path: src/components/App.tsx
user: login: tomershvueli
body: Is `#959494` a theme color? If so, it should be defined in our tailwind file and brought in here under a `primary`, `secondary`, etc class name, so we won't be repeating ourselves throughout the entire application. 
created_at: 2025-05-01T19:37:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+import React from "react";
+import { DropdownButton } from "./DropdownButton";
+import { DropdownContent } from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+// import icons from "../../dist/icons/Icon.png"
path: src/components/Dropdown.tsx
user: login: bjthe4
body: I updated the changes.
created_at: 2025-05-03T13:09:06Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,22 @@
+import React from "react";
+import icons from "../../public/icons/Icon.png";
path: src/components/DropdownButton.tsx
user: login: bjthe4
body: I updated the changes.
created_at: 2025-05-03T13:09:56Z
author_association: COLLABORATOR
diff_hunk: @@ -1,15 +1,34 @@
 import React from "react";
 import { LoginForm } from "./LoginForm";
+import { Dropdown } from "./Dropdown";
+import { DropdownCourse } from "./DropdownCourse";
 
 export const App: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = React.useState(false);
-
+  const course = ["one", "two", "three"];
   return (
     <div className="w-96 h-96 bg-white p-4">
       {!isLoggedIn ? (
         <LoginForm onLogin={() => setIsLoggedIn(true)} />
       ) : (
+        <>
+      <div className="mb-1 text-[12px] font-normal text-[#959494] leading-[110%]">
path: src/components/App.tsx
user: login: bjthe4
body: I've added the Storybook file for the dropdown component and refactored the inline color into a Tailwind class for better reusability.
created_at: 2025-05-05T16:03:29Z
author_association: COLLABORATOR
path: public/icons/Icon.png
user: login: tomershvueli
body: Unnecessary duplicate file. 
created_at: 2025-05-05T23:38:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -35,7 +38,24 @@ export const App: React.FC = () => {
           onForgotPassword={handleForgot}
         />
       ) : (
+        <>
+//         <div className="mb-1 text-[12px] font-normal text-grayBorder leading-[110%]">
path: src/components/App.tsx
user: login: tomershvueli
body: Let's remove these lines entirely if we don't need them. 
created_at: 2025-05-05T23:38:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,62 @@
+// import React from "react";
path: src/components/yerrr
user: login: tomershvueli
body: Still here unfortunately - let's remove this. 
created_at: 2025-05-05T23:39:04Z
author_association: CONTRIBUTOR
diff_hunk: @@ -17,13 +17,13 @@ export default {
         bold: 700,
       },
       colors: {
-        // greys & borders
+        grayBorder: "#959494",
path: tailwind.config.js
user: login: tomershvueli
body: Remove duplicate line. 
created_at: 2025-05-05T23:39:14Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { Dropdown } from "./Dropdown";
path: src/components/Dropdown.stories.tsx
user: login: tomershvueli
body: Can we use args/parameters here such that our storybook isn't hardcoded? Or, if it is hardcoded, at least give other developers the ability to adjust the dropdown items. 
created_at: 2025-05-05T23:40:32Z
author_association: CONTRIBUTOR
path: public/icons/Icon.png
user: login: bjthe4
body: The duplicate file is deleted
created_at: 2025-05-06T02:00:09Z
author_association: COLLABORATOR
diff_hunk: @@ -35,7 +38,24 @@ export const App: React.FC = () => {
           onForgotPassword={handleForgot}
         />
       ) : (
+        <>
+//         <div className="mb-1 text-[12px] font-normal text-grayBorder leading-[110%]">
path: src/components/App.tsx
user: login: bjthe4
body: I removed the lines.
created_at: 2025-05-06T02:00:24Z
author_association: COLLABORATOR
diff_hunk: @@ -17,13 +17,13 @@ export default {
         bold: 700,
       },
       colors: {
-        // greys & borders
+        grayBorder: "#959494",
path: tailwind.config.js
user: login: bjthe4
body: duplicate file removed.
created_at: 2025-05-06T02:00:43Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,37 @@
+import { Dropdown } from "./Dropdown";
path: src/components/Dropdown.stories.tsx
user: login: bjthe4
body: Hey! Just a heads up—we did implement the args in the story using destructuring inside the Template function. 
created_at: 2025-05-06T02:01:59Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,62 @@
+// import React from "react";
path: src/components/yerrr
user: login: tomershvueli
body: Still need to remove this file. `git rm <path to file>` should do the trick here. 
created_at: 2025-05-06T02:07:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+import React from "react";
+import { DropdownButton } from "./DropdownButton";
+import { DropdownContent } from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+// import icons from "../../dist/icons/Icon.png"
path: src/components/Dropdown.tsx
user: login: tomershvueli
body: @bjthe4 Still need to remove this line. 
created_at: 2025-05-06T02:09:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -35,7 +38,24 @@ export const App: React.FC = () => {
           onForgotPassword={handleForgot}
         />
       ) : (
+        <>
+       <div className="mb-1 text-[12px] font-normal text-grayBorder leading-[110%]">
+ Location
+</div>
+        <Dropdown 
path: src/components/App.tsx
user: login: tomershvueli
body: A simpler way to render this component would be to simply pass the `course` array into the `Dropdown` component and that's it. The `Dropdown` component can render its own children (dropdown elements in this case) on its own, leaving the `App` to be none-the-wiser. All the App needs to know is I want a dropdown, it doesn't need to care how the Dropdown renders. 
This would simply look something like: 
```<Dropdown items={course} buttonText="Gilory Golf Course" />```
Then you'd move the `course.map` logic to the `Dropdown` component itself. 
created_at: 2025-05-06T02:14:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,42 @@
+import React from "react";
+import {DropdownButton} from "./DropdownButton";
+import {DropdownContent} from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+// import icons from "../../dist/icons/Icon.png"
+
+interface DropdownProps {
+    buttonText: string;
+    content: React.ReactNode;
+    
+  }
+
+  export const Dropdown: React.FC<DropdownProps> = ({buttonText, content}: DropdownProps) => {
path: src/components/Dropdown.tsx
user: login: tomershvueli
body: I'm not able to properly select a dropdown option. When I click on an option, nothing happens. Also, as a user, I'd expect the title of the dropdown to be the selected option. Right now, the text when the dropdown loads isn't even an option in the dropdown. 
created_at: 2025-05-06T02:15:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -35,7 +38,24 @@ export const App: React.FC = () => {
           onForgotPassword={handleForgot}
         />
       ) : (
+        <>
+       <div className="mb-1 text-[12px] font-normal text-grayBorder leading-[110%]">
+ Location
+</div>
+        <Dropdown 
path: src/components/App.tsx
user: login: bjthe4
body: I went ahead and moved the .map logic into the Dropdown component so the App only needs to pass in the items and buttonText props now.
created_at: 2025-05-07T15:52:51Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,42 @@
+import React from "react";
+import {DropdownButton} from "./DropdownButton";
+import {DropdownContent} from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+// import icons from "../../dist/icons/Icon.png"
+
+interface DropdownProps {
+    buttonText: string;
+    content: React.ReactNode;
+    
+  }
+
+  export const Dropdown: React.FC<DropdownProps> = ({buttonText, content}: DropdownProps) => {
path: src/components/Dropdown.tsx
user: login: bjthe4
body: I updated the dropdown so that selecting an option now updates the visible title.
created_at: 2025-05-07T15:53:22Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,62 @@
+// import React from "react";
path: src/components/yerrr
user: login: bjthe4
body: Updated.
created_at: 2025-05-08T18:15:38Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,57 @@
+import React from "react";
+import {DropdownButton} from "./DropdownButton";
+import {DropdownContent} from "./DropdownContent";
+import { useState, useEffect, useRef } from "react";
+
+interface DropdownProps {
+    buttonText: string;
+    onSelect?: (item: string) => void;
+    items: string[];
+  }
+
+  export const Dropdown: React.FC<DropdownProps> = ({buttonText, onSelect, items}: DropdownProps) => {
+    const [open, setOpen] = useState(false);
+    const [selectedItem, setSelectedItem] = useState<string>(buttonText || items[0]);
path: src/components/Dropdown.tsx
user: login: tomershvueli
body: I like this 👍
created_at: 2025-05-10T21:00:29Z
author_association: CONTRIBUTOR

PR comments:
user: login: ChristianSTo
created_at: 2025-04-29T19:42:23Z
body: I tried the dropdown in npm run dev, I cannot select any of the choices. The style looks good, except there are // in the display. 
<img width="462" alt="Screenshot 2025-04-29 at 12 49 54 PM" src="https://github.com/user-attachments/assets/e7d272ba-000a-47e8-9c5a-2e9e2487ce55" />

author_association: COLLABORATOR
user: login: ChristianSTo
created_at: 2025-04-29T20:07:47Z
body: Okay this is just for the component and how it looks, so I am okay with it. It is a pass for me, but if Gill made a comment, check for his approval.
author_association: COLLABORATOR
user: login: tomershvueli
created_at: 2025-05-03T13:31:01Z
body: @bjthe4 can we add a storybook file for any relevant components? 
author_association: CONTRIBUTOR
user: login: bjthe4
created_at: 2025-05-05T16:00:56Z
body: > @bjthe4 can we add a storybook file for any relevant components?


author_association: COLLABORATOR