Propered forums tag component

client/src/components/TagInput.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button } from "@nextui-org/react";
+import { Button, Chip } from "@nextui-org/react";
 import NextUIFormikTagInput from "./NextUIFormikTagInput";
 
 type TagInputProps = {
@@ -17,7 +17,7 @@ const TagInput: React.FC<TagInputProps> = ({ tags, setTags }) => {
     setInputTag(newTag);
 
     // Dynamic duplicate check
-        if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
+    if (tags.some((tag) => tag.toLowerCase() === newTag.toLowerCase())) {
       setError("Tag already added.");
     } else {
       setError(null);
@@ -52,23 +52,22 @@ const TagInput: React.FC<TagInputProps> = ({ tags, setTags }) => {
           onChange={handleInputChange} // Use the dynamic check handler
         />
         {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
+          onPress={handleAddTag}
+          disabled={!!error}
+          className="mt-2 bg-primary-50 dark:bg-primary-800"
+        >
+          Add
+        </Button>
       </div>
       <div className="flex gap-2 flex-wrap mt-4">
         {tags.map((tag, index) => (
-                    <div
-                        key={index}
-                        className="flex items-center gap-1 bg-primary-50 dark:bg-primary-800 p-2 rounded"
+          <Chip
+            className="bg-primary-50 dark:bg-primary-800"
+            onClose={() => handleRemoveTag(index)}
           >
-                        <span>{tag}</span>
-                        <button
-                            type="button"
-                            onClick={() => handleRemoveTag(index)}
-                            className="ml-2 text-red-500"
-                        >
-                            X
-                        </button>
-                    </div>
+            {tag}
+          </Chip>
         ))}
       </div>
     </div>