"use client"; import { useState, KeyboardEvent } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"; import { Input } from "@/app/_components/ui/input"; import { Badge } from "@/app/_components/ui/badge"; import { GripVertical, X, Tags, Hash, Palette, Code, Star, Building2, User, Layers } from "lucide-react"; import { cn } from "@/lib/utils"; import { DndContext, DragEndEvent, DragOverlay, DragStartEvent, PointerSensor, TouchSensor, useSensor, useSensors, closestCenter, } from "@dnd-kit/core"; import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable, } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; export type TagVariant = "default" | "secondary" | "destructive" | "outline"; export type TagColor = "blue" | "green" | "purple" | "orange" | "pink" | "gray"; export interface Tag { id: string; label: string; variant?: TagVariant; color?: TagColor; } export interface TagsReorderableProps { tags?: Tag[]; title?: string; placeholder?: string; maxTags?: number; allowDuplicates?: boolean; predefinedTags?: string[]; onChange?: (tags: Tag[]) => void; } const colorClasses: Record = { blue: "bg-blue-100 text-blue-700 border-blue-200 hover:bg-blue-200", green: "bg-green-100 text-green-700 border-green-200 hover:bg-green-200", purple: "bg-purple-100 text-purple-700 border-purple-200 hover:bg-purple-200", orange: "bg-orange-100 text-orange-700 border-orange-200 hover:bg-orange-200", pink: "bg-pink-100 text-pink-700 border-pink-200 hover:bg-pink-200", gray: "bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200", }; const defaultTags: Tag[] = [ { id: "1", label: "React", color: "blue" }, { id: "2", label: "TypeScript", color: "blue" }, { id: "3", label: "UI Design", color: "purple" }, { id: "4", label: "Frontend", color: "green" }, { id: "5", label: "shadcn", color: "gray" }, ]; const suggestedTags = [ "JavaScript", "Python", "Node.js", "CSS", "HTML", "Next.js", "Tailwind", "Figma", "Git", "Docker", "AWS", "Database" ]; // Sortable Tag Component interface SortableTagProps { tag: Tag; onRemove: (id: string) => void; isOverlay?: boolean; } function SortableTag({ tag, onRemove, isOverlay }: SortableTagProps) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: tag.id }); const style = { transform: CSS.Transform.toString(transform), transition, }; return (

{tag.label}

); } // Drag Overlay Component function DragOverlayTag({ tag }: { tag: Tag }) { return (

{tag.label}

); } export function TagsReorderable({ tags: initialTags = defaultTags, title = "Tags", placeholder = "Add a tag...", maxTags = 15, allowDuplicates = false, predefinedTags = suggestedTags, onChange, }: TagsReorderableProps) { const [tags, setTags] = useState(initialTags); const [inputValue, setInputValue] = useState(""); const [activeId, setActiveId] = useState(null); const [selectedColor, setSelectedColor] = useState("blue"); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5, }, }), useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 5, }, }) ); const activeTag = activeId ? tags.find((t) => t.id === activeId) : null; const handleDragStart = (event: DragStartEvent) => { setActiveId(event.active.id as string); }; const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event; if (!over || active.id === over.id) { setActiveId(null); return; } const oldIndex = tags.findIndex((t) => t.id === active.id); const newIndex = tags.findIndex((t) => t.id === over.id); if (oldIndex !== -1 && newIndex !== -1) { const newTags = arrayMove(tags, oldIndex, newIndex); setTags(newTags); onChange?.(newTags); } setActiveId(null); }; const addTag = (label: string, color: TagColor = selectedColor) => { const trimmedLabel = label.trim(); if (!trimmedLabel) return; if (tags.length >= maxTags) return; if (!allowDuplicates && tags.some((t) => t.label.toLowerCase() === trimmedLabel.toLowerCase())) { return; } const newTag: Tag = { id: Date.now().toString(), label: trimmedLabel, color, }; const newTags = [...tags, newTag]; setTags(newTags); onChange?.(newTags); setInputValue(""); }; const removeTag = (id: string) => { const newTags = tags.filter((t) => t.id !== id); setTags(newTags); onChange?.(newTags); }; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); addTag(inputValue); } if (e.key === "Backspace" && !inputValue && tags.length > 0) { removeTag(tags[tags.length - 1].id); } }; const availablePredefinedTags = predefinedTags.filter( (tag) => !tags.some((t) => t.label.toLowerCase() === tag.toLowerCase()) ); return (

{title}

{tags.length} / {maxTags}

{/* Tags Display with DnD */} t.id)} strategy={horizontalListSortingStrategy} >

{tags.length === 0 ? (

No tags yet. Add some below!

) : ( tags.map((tag) => ( )) )}

{activeTag ? : null} {/* Input Section */}

setInputValue(e.target.value)} onKeyDown={handleKeyDown} placeholder={placeholder} className="pl-9" disabled={tags.length >= maxTags} />

{/* Color Preview */}

New tags will be: {selectedColor}

{/* Suggested Tags */} {availablePredefinedTags.length > 0 && (

Suggested:

{availablePredefinedTags.slice(0, 8).map((tag) => ( ))}

)} {/* Tips */}

Tip: Drag tags to reorder. Press Enter to add a tag, Backspace to remove the last tag. Click the × to remove a specific tag.

); }

Reorderable Tags

Installation

Preview

Tags

Usage

Dependencies

shadcn/ui Components