From 1d9ff5d67af45acc6e8e018af221485ce539a711 Mon Sep 17 00:00:00 2001
From: Stedoss <29103029+Stedoss@users.noreply.github.com>
Date: Mon, 31 Oct 2022 13:28:54 +0000
Subject: [PATCH] Add `DropdownFilter` as generic filter to use for tags and
 categories

---
 .../src/components/dropdown-filter.tsx        | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 frontend/leeds-beer-quest/src/components/dropdown-filter.tsx

diff --git a/frontend/leeds-beer-quest/src/components/dropdown-filter.tsx b/frontend/leeds-beer-quest/src/components/dropdown-filter.tsx
new file mode 100644
index 0000000..5bf0ba1
--- /dev/null
+++ b/frontend/leeds-beer-quest/src/components/dropdown-filter.tsx
@@ -0,0 +1,34 @@
+import { ListItemText, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import { useState } from "react";
+
+export type TFilter = {
+    id: number;
+    name: string;
+}
+
+export type TDropdownFilterProps = {
+    filters: TFilter[];
+}
+
+export function DropdownFilter(props: TDropdownFilterProps) {
+    const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+    const handleChange = (event: SelectChangeEvent<typeof selectedTags>) => {
+        const { value } = event.target;
+        setSelectedTags(typeof value == "string" ? value.split(",") : value);
+    };
+
+    return(
+        <Select
+        multiple
+        value={selectedTags}
+        onChange={handleChange}
+        renderValue={(selected) => selected.join(', ')}>
+            {props.filters.map((filter) => (
+                <MenuItem key={filter.id} value={filter.name}>
+                    <ListItemText primary={filter.name} />
+                </MenuItem>
+            ))}
+        </Select>
+    );
+}
\ No newline at end of file