[Frontend] Implement Dropdown Component

[Nathan-Papa]

Description:

Bits of Good designers want to have a single dropdown component that we can use across all of our applications. This dropdown has a couple of different use cases, so make sure to check both the prototyping Figma link (for background and behavior) along with the

Acceptance Criteria:

• react-dropdown-menu component from Radix-UI is imported
• src/components/BogDropdown/BogDropdown.tsx:
  • Contains an interface called BogDropdownProps that has the following members:
    • type is a string that can take on the values "normal", "checkbox", "radio", and "search" representing the type of dropdown it is
    • options is a string array representing the text that will go on each dropdown option
    • placeholder is an optional string prop that defaults to "Placeholder" that serves as the placeholder text in the top part of the dropdown menu
    • Component can also support "className", "style", and "disabled" props (though you might not need to explicitly include these in the interface)
  • Component returns a dropdown backed by Radix-UI's component that maps each option in the options prop to a dropdown option:
    • If type = 'checkbox', each option has a BogCheckbox on the left side of the option, and the component properly stores all checked components (it should support multi-select by the user checking each box in the dropdown)
    • If type = 'radio', the dropdown should be backed by a BogRadioGroup, and each dropdown item has a BogRadioButton on it. This dropdown should track only one selected option.
    • If type = 'normal', the dropdown should behave the same as when type = 'radio' except there is no radio group
    • If type = 'search', the dropdown should behave as a single select dropdown where typing in the top part of the dropdown filters out options that don't contain the typed text.
  • Component has the correct icon in the top part of the dropdown:
    • For type = 'search', the icon on the right side is <BogIcon name='search' /> (you might need to play with the weight, color, and size of the icon)
    • For all other types, the icon on the right side is <BogIcon name='caret-down' /> (again, you might want to play with the props)
  • Component behaves as outlined in the Figma
    • Pay attention to the prototyping section to see the behavior along with the hover and disabled styles on the right side.
• src/components/BogDropdown/styles.module.css:
  • Contains all of the styles necessary to style the BogDropdown component according to the Figma below
    • All styles are placed in tailwind's base layer (look in resources to see what I am talking about)
• src/pages/index.tsx:
  • There is a dropdown of each type with a couple of options each on this page

Resources:

Figma link for the Dropdown component: https://www.figma.com/design/3ZrnHZLADWKkgFDBxN10hc/Bits-of-Good-Sunset%3A-Design-System?node-id=297-909&p=f&t=aOL7UBzhJyjwfydH-0

Radix-UI Dropdown Component: https://www.radix-ui.com/primitives/docs/components/dropdown-menu

Tailwind base layer:
This is the first layer of styles that tailwind applies, and this is what makes it easy for us to apply default styles that can be overwritten by inline tailwind classes and inline css styles. Your stylesheet should look like what is below.

@layer base {
    styles....
}