Filter

The Filter component provides a set of buttons to allow users to filter items by category. It highlights the selected category and updates the displayed items based on the user’s selection, enhancing user interactivity within sections like feature or product lists.

Props

Prop	Type	Description
categories	Array<string>	An array of category names used to create filter buttons.
onFilter	(category: string) => void	Callback function triggered with the selected category.

Key Style Classes

• Button Styles:

  • border-[1px] p-[7px] font-light text-sm rounded-md: Creates a bordered button with padding and rounded corners for each category.

  • Conditional Background:

    • bg-neutral-950: Sets the background color for the selected button.

    • bg-black: Sets the background color for unselected buttons.

  • Conditional Border Color:

    • border-emerald-500: Highlights the border for the selected button.

    • border-gray-400 border-opacity-10: Provides a lighter border for unselected buttons.

  • hover:brightness-125 transition: Adds a hover effect to brighten the button slightly for better interactivity.

Usage Example

// Example usage of Filter component within a parent component
<Filter
  categories={["Feature 1", "Feature 2", "Feature 3"]}
  onFilter={(selectedCategory) => handleCategoryChange(selectedCategory)}
/>

Additional Notes

• Selected Category State:

  • The component maintains selectedCategory as local state to highlight the currently active category.

  • handleClick updates both selectedCategory and calls onFilter to notify the parent component of the selection.

• Dynamic Category List: The categories prop allows for flexible category management, enabling the Filter component to adapt to any set of items.

• User Feedback: Visual differences between selected and unselected categories provide users with clear feedback on their selection.

---

This entry should cover the main aspects of the Filter component.