diff --git a/frontend/src/components/filters/standardDimensions.tsx b/frontend/src/components/filters/standardDimensions.tsx index 3ea2ef0..a4ebefb 100644 --- a/frontend/src/components/filters/standardDimensions.tsx +++ b/frontend/src/components/filters/standardDimensions.tsx @@ -1,6 +1,15 @@ import TreeSelect from 'antd/es/tree-select'; import Empty from 'antd/es/empty'; -import { buildCategoryTree, categoryPath, toCategoryTreeData } from '../../filters'; +import Select from 'antd/es/select'; +import Tag from 'antd/es/tag'; +import Slider from 'antd/es/slider'; +import InputNumber from 'antd/es/input-number'; +import { + buildCategoryTree, + categoryPath, + formatPriceRange, + toCategoryTreeData +} from '../../filters'; import type { FilterDimension } from './dimension'; /** @@ -50,3 +59,134 @@ export const categoryDimension: FilterDimension = { }) })) }; + +export const tagDimension: FilterDimension = { + key: 'tag', + placement: 'drawer', + // AND, deliberately the opposite of the category rule above. + heading: 'Tags — must have all of these', + + render: ({ tags, filters, onChange }) => { + // The Select is handed ids, so a colour has to be looked up rather than + // carried along with the value. + const colours = new Map(tags.map((tag) => [tag.id, tag.color])); + return tags.length ? ( +