wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Propered forums tag component

Browse Source
This commit is contained in:
Adam C
2024-08-14 14:52:43 +08:00
parent 0f765cd833
commit 082e01599b
1 changed files with 62 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/TagInput.tsx
View File

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