Input With Tags

1"use client"
2 
3import { useState } from "react"
4import { cn } from "@/lib/utils"
5import { Button } from "@/components/ui/button" // Updated to point to registry button
6import { X } from "lucide-react"
7import { motion, AnimatePresence } from "motion/react" // Updated to motion/react
8 
9interface Tag {
10  text: string
11  onRemove: () => void
12}
13 
14const Tag = ({ text, onRemove }: Tag) => {
15  return (
16    <motion.span
17      initial={{ opacity: 0, scale: 0.8, y: -10, filter: "blur(10px)" }}
18      animate={{ opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }}
19      exit={{ opacity: 0, scale: 0.8, y: -10, filter: "blur(10px)" }}
20      transition={{
21        duration: 0.4,
22        ease: "circInOut",
23        type: "spring",
24      }}
25      className="bg-accent text-accent-foreground flex items-center gap-1 rounded-xl px-2 py-1 text-sm shadow-sm backdrop-blur-sm"
26    >
27      {text}
28      <motion.div
29        whileHover={{ scale: 1.1 }}
30        whileTap={{ scale: 0.9 }}
31      >
32        <Button
33          onClick={onRemove}
34          className="text-accent-foreground hover:bg-muted flex h-fit items-center justify-center rounded-full bg-transparent p-1 text-xs"
35        >
36          <X className="h-4 w-4" />
37        </Button>
38      </motion.div>
39    </motion.span>
40  )
41}
42 
43interface InputWithTagsProps {
44  placeholder?: string
45  className?: string
46  limit?: number
47}
48 
49const InputWithTags = ({
50  placeholder,
51  className,
52  limit = 10,
53}: InputWithTagsProps) => {
54  const [tags, setTags] = useState<string[]>([])
55  const [inputValue, setInputValue] = useState("")
56 
57  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
58    if (e.key === "Enter" && inputValue.trim()) {
59      e.preventDefault()
60      if (!limit || tags.length < limit) {
61        setTags([...tags, inputValue.trim()])
62        setInputValue("")
63      }
64    }
65  }
66 
67  const removeTag = (indexToRemove: number) => {
68    setTags(tags.filter((_, index) => index !== indexToRemove))
69  }
70 
71  return (
72    <div className={cn("flex w-full max-w-xl flex-col gap-2", className)}>
73      <motion.div
74        initial={{ opacity: 0, scale: 0.9, filter: "blur(10px)" }}
75        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
76        transition={{ duration: 0.5, type: "spring", stiffness: 200 }}
77      >
78        <motion.input
79          type="text"
80          value={inputValue}
81          onChange={(e) => setInputValue(e.target.value)}
82          onKeyDown={handleKeyDown}
83// … truncated