Propered forums tag component

client/src/components/TagInput.tsx

@@ -1,78 +1,77 @@
 import React, { useState } from "react";
-import { Button } from "@nextui-org/react";
+import { Button, Chip } from "@nextui-org/react";
 import NextUIFormikTagInput from "./NextUIFormikTagInput";
 
 type TagInputProps = {
-    tags: string[];
+  tags: string[];
-    setTags: (tags: string[]) => void;
+  setTags: (tags: string[]) => void;
 };
 
 const TagInput: React.FC<TagInputProps> = ({ tags, setTags }) => {
-    const [inputTag, setInputTag] = useState("");
+  const [inputTag, setInputTag] = useState("");
-    const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-    // Handle input change and dynamic duplicate check
+  // Handle input change and dynamic duplicate check
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newTag = e.target.value.trim();
+    const newTag = e.target.value.trim();
-        setInputTag(newTag);
+    setInputTag(newTag);
 
-        // Dynamic duplicate check
+    // Dynamic duplicate check
-        if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
+    if (tags.some((tag) => tag.toLowerCase() === newTag.toLowerCase())) {
-            setError("Tag already added.");
+      setError("Tag already added.");
-        } else {
+    } else {
-            setError(null);
+      setError(null);
-        }
+    }
-    };
+  };
 
-    const handleAddTag = () => {
+  const handleAddTag = () => {
-        if (error) {
+    if (error) {
-            return; // Prevent adding if there's an error
+      return; // Prevent adding if there's an error
-        }
+    }
 
-        if (inputTag.trim() !== "") {
+    if (inputTag.trim() !== "") {
-            setTags([...tags, inputTag.trim()]);
+      setTags([...tags, inputTag.trim()]);
-            setInputTag(""); // Clear input field  
+      setInputTag(""); // Clear input field
-        }
+    }
-    };
+  };
 
-    const handleRemoveTag = (index: number) => {
+  const handleRemoveTag = (index: number) => {
-        setTags(tags.filter((_, i) => i !== index));
+    setTags(tags.filter((_, i) => i !== index));
-    };
+  };
 
-    return (
+  return (
-        <div>
+    <div>
-            <div>
+      <div>
-                <NextUIFormikTagInput
+        <NextUIFormikTagInput
-                    label="Tags (Optional)"
+          label="Tags (Optional)"
-                    name="tagInput" // This name should be unique and not conflict with other form fields
+          name="tagInput" // This name should be unique and not conflict with other form fields
-                    type="text"
+          type="text"
-                    placeholder="Enter tags"
+          placeholder="Enter tags"
-                    labelPlacement="inside"
+          labelPlacement="inside"
-                    value={inputTag}
+          value={inputTag}
-                    onChange={handleInputChange} // Use the dynamic check handler
+          onChange={handleInputChange} // Use the dynamic check handler
-                />
+        />
-                {error && <div className="text-red-500 mt-2">{error}</div>}
+        {error && <div className="text-red-500 mt-2">{error}</div>}
-                <Button onPress={handleAddTag} disabled={!!error} className="mt-2 bg-primary-50 dark:bg-primary-800">Add</Button>
+        <Button
-            </div>
+          onPress={handleAddTag}
-            <div className="flex gap-2 flex-wrap mt-4">
+          disabled={!!error}
-                {tags.map((tag, index) => (
+          className="mt-2 bg-primary-50 dark:bg-primary-800"
-                    <div
+        >
-                        key={index}
+          Add
-                        className="flex items-center gap-1 bg-primary-50 dark:bg-primary-800 p-2 rounded"
+        </Button>
-                    >
+      </div>
-                        <span>{tag}</span>
+      <div className="flex gap-2 flex-wrap mt-4">
-                        <button
+        {tags.map((tag, index) => (
-                            type="button"
+          <Chip
-                            onClick={() => handleRemoveTag(index)}
+            className="bg-primary-50 dark:bg-primary-800"
-                            className="ml-2 text-red-500"
+            onClose={() => handleRemoveTag(index)}
-                        >
+          >
-                            X
+            {tag}
-                        </button>
+          </Chip>
-                    </div>
+        ))}
-                ))}
+      </div>
-            </div>
+    </div>
-        </div>
+  );
-    );
 };
 
 export default TagInput;