cleanup and checkpoint

compass/components/Table/Index.tsx

@@ -33,10 +33,16 @@ type User = {
 export const Table = () => {
   const columnHelper = createColumnHelper<User>();
   const [presetOptions, setPresetOptions] = useState(["administrator", "volunteer", "employee"]);
+  const [tagColors, setTagColors] = useState(new Map());
 
-  const handleAddTag = (newTag) => {
+  const getTagColor = (tag: string) => {
-    setPresetOptions((prevOptions) => [...prevOptions, newTag]);
+    if (!tagColors.has(tag)) {
-  }
+      const colors = ["bg-cyan-100", "bg-blue-100", "bg-green-100", "bg-yellow-100", "bg-purple-100"];
+      const randomColor = colors[Math.floor(Math.random() * colors.length)];
+      setTagColors(new Map(tagColors).set(tag, randomColor));
+    }
+    return tagColors.get(tag);
+  };
 
   const columns = [
     columnHelper.display({
@@ -50,7 +56,9 @@ export const Table = () => {
     columnHelper.accessor("role", {
       cell: (info) => <TagsInput presetValue={info.getValue() }
       presetOptions={presetOptions}
-      addOption={handleAddTag}
+      setPresetOptions={setPresetOptions}
+      getTagColor={getTagColor}
+      setTagColors={setTagColors}
       />,
     }),
     columnHelper.accessor("email", {

compass/components/TagsInput/Index.tsx

@@ -11,7 +11,8 @@ interface TagsInputProps {
 const TagsInput: React.FC<TagsInputProps> = ({
   presetValue,
   presetOptions,
-  addOption,
+  setPresetOptions,
+  getTagColor
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [cellSelected, setCellSelected] = useState(false);
@@ -49,7 +50,11 @@ const TagsInput: React.FC<TagsInputProps> = ({
 
   const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue.trim()) {
-      addOption(inputValue);
+      // setPresetOptions((prevPreset) => {
+      //   const uniqueSet = new Set(presetOptions);
+      //   uniqueSet.add(inputValue);
+      //   return Array.from(uniqueSet);
+      // });
       setTags((prevTags) => new Set(prevTags).add(inputValue));
       setOptions((prevOptions) => new Set(prevOptions).add(inputValue));
       setInputValue("");
@@ -72,6 +77,7 @@ const TagsInput: React.FC<TagsInputProps> = ({
   };
 
   const handleDeleteTagOption = (tagToDelete: string) => {
+    // setPresetOptions(presetOptions.filter(tag => tag !== tagToDelete));
     setOptions((prevOptions) => {
       const updatedOptions = new Set(prevOptions);
       updatedOptions.delete(tagToDelete);

compass/components/TagsInput/Tag.tsx

@@ -1,8 +1,10 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 export const Tag = ({ children, handleDelete, active = false }) => {
 
+  const [tagColor, setTagColor] = useState('');
+
   return (
     <span className={`font-normal bg-cyan-100 text-gray-800 flex flex-row p-1 px-2 rounded-lg`}>
       {children}