From cc28e8e93965b7d7401a258a14d8025f68dc7f92 Mon Sep 17 00:00:00 2001
From: John Shepherd <john.shepherd@tri.global>
Date: Thu, 8 Aug 2024 11:50:57 -0700
Subject: [PATCH] Add multiselect

---
 lib/components/multiselect.tsx | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 lib/components/multiselect.tsx

diff --git a/lib/components/multiselect.tsx b/lib/components/multiselect.tsx
new file mode 100644
index 0000000..3a8c005
--- /dev/null
+++ b/lib/components/multiselect.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Menu, MenuHandler, MenuList, MenuItem, Button, Chip } from '@material-tailwind/react';
+
+interface MultiselectProps {
+  label: string;
+  options: string[];
+  selectedOptions: string[];
+  setSelectedOptions: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+export const Multiselect = ({ label, options, selectedOptions, setSelectedOptions }: MultiselectProps) => {
+  const handleSelect = (option) => {
+    if (selectedOptions.includes(option)) {
+      setSelectedOptions(selectedOptions.filter((item) => item !== option));
+    } else {
+      setSelectedOptions([...selectedOptions, option]);
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <Menu>
+        <MenuHandler>
+          <Button variant="outlined" color="blue" className="w-full">
+            {label}
+          </Button>
+        </MenuHandler>
+        <MenuList className="max-w-full">
+          {options.map((option, index) => (
+            <MenuItem key={index} onClick={() => handleSelect(option)}>
+              <div className="flex w-full items-center justify-between">
+                <span>{option}</span>
+                {selectedOptions.includes(option) && <Chip value="Selected" color="green" size="sm" className="ml-2" />}
+              </div>
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Menu>
+      <div className="mt-2 flex flex-wrap gap-2">
+        {selectedOptions.map((option, index) => (
+          <Chip key={index} value={option} color="blue" size="sm" />
+        ))}
+      </div>
+    </div>
+  );
+};