Tags

Filter products by

• Component: and related tag components

• Path: /components/shared/tag-selector.tsx

• Import:

import { TagSelector } from "@/components/shared/tag-selector";

Tag Selector

A tag system that lets you categorize and filter products. Tags are colored badges that you can click to select/deselect.

Main Components:

1. TagSelector:

• Props:

  • selectedTags: string[] - Currently selected tag slugs

  • onChange: (tags: string[]) => void - Called when tags are selected/deselected

• Features:

  • Shows tags as clickable colored badges

  • Switches to dropdown if you have more than 10 tags

  • Shows loading spinner while fetching tags

1. ProductTags: import { ProductTags } from "@/components/shared/product-tags";

Props:

• tags: ExtendedProductTag[] - Tags to display

• limit?: number - How many tags to show (default: 3)

• showAll?: boolean - Show all tags instead of limiting

• Features:

  • Shows tags on product cards

  • Shows "+X more" if there are hidden tags

  • Clicking tag navigates to tag page

1. Admin Management: Path: /dashboard/admin/tags

• Features:

  • Create tags with custom colors

  • Edit existing tags

  • Assign tags to products

  • Delete tags

Example usage in main-layout.tsx:

// For filtering products
const [selectedTags, setSelectedTags] = useState<string[]>([]);
<TagSelector selectedTags={selectedTags} onChange={setSelectedTags} />

// For displaying on a product
<ProductTags tags={product.tags} limit={3} />

By default, tag search bar will only display when there's more than 10 tags.