25 lines
1.8 KiB
Markdown
25 lines
1.8 KiB
Markdown
## Context
|
|
|
|
The current dropdown in `FilterBox.js` is a basic HTML `<select>` element. To align with the shadcn/ui aesthetic, we need a more flexible and styleable component. The shadcn/ui Dropdown Menu is built on top of Radix UI's Dropdown Menu primitive, which provides accessibility and interaction features.
|
|
|
|
## Goals / Non-Goals
|
|
|
|
**Goals:**
|
|
- Replace the native `<select>` dropdown with a custom component that visually and functionally mimics the shadcn/ui Dropdown Menu.
|
|
- Ensure the new component is accessible and reusable.
|
|
|
|
**Non-Goals:**
|
|
- Implement every single feature of the shadcn/ui Dropdown Menu. We will only implement the features currently required by the `FilterBox`.
|
|
- Create a full component library. The focus is solely on the dropdown.
|
|
|
|
## Decisions
|
|
|
|
- **Component Library:** We will not install the entire `shadcn-ui` library, as that would be overkill. Instead, we will create a new React component that replicates the required styles.
|
|
- **Styling:** We will use CSS modules to encapsulate the styles for the new dropdown component, inspired by the styling of shadcn/ui. This avoids conflicts with existing styles.
|
|
- **Implementation:** A new component, `Dropdown.js`, will be created. It will manage its own state (e.g., open/closed, selected value). `FilterBox.js` will be updated to use this new `Dropdown` component.
|
|
|
|
## Risks / Trade-offs
|
|
|
|
- **[Risk]** Creating a custom component takes more effort than using a pre-built library. → **Mitigation:** The required dropdown functionality is simple, and a custom component gives us full control over the implementation and avoids unnecessary dependencies.
|
|
- **[Trade-off]** We are not using the exact shadcn/ui library, so we will have to manually update the component if the shadcn/ui design evolves. → **Mitigation:** The design is for a simple dropdown, which is unlikely to change significantly.
|