Animated Tags

1"use client";
2 
3import { CircleX, Plus } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useState } from "react";
6 
7export interface AnimatedTagsProps {
8  className?: string;
9  initialTags?: string[];
10  onChange?: (selected: string[]) => void;
11  selectedTags?: string[];
12}
13 
14export default function AnimatedTags({
15  initialTags = ["react", "tailwindcss", "javascript"],
16  selectedTags: controlledSelectedTags,
17  onChange,
18  className = "",
19}: AnimatedTagsProps) {
20  const [internalSelected, setInternalSelected] = useState<string[]>([]);
21  const shouldReduceMotion = useReducedMotion();
22 
23  const selectedTag = controlledSelectedTags ?? internalSelected;
24  const tags = initialTags.filter((tag) => !selectedTag.includes(tag));
25 
26  const handleTagClick = (tag: string) => {
27    const newSelected = [...selectedTag, tag];
28    if (onChange) {
29      onChange(newSelected);
30    } else {
31      setInternalSelected(newSelected);
32    }
33  };
34  const handleDeleteTag = (tag: string) => {
35    const newSelectedTag = selectedTag.filter((selected) => selected !== tag);
36    if (onChange) {
37      onChange(newSelectedTag);
38    } else {
39      setInternalSelected(newSelectedTag);
40    }
41  };
42  return (
43    <div className={`flex w-[300px] flex-col gap-4 p-4 ${className}`}>
44      <div className="flex flex-col items-start justify-center gap-1">
45        <p>Selected Tags</p>
46        <AnimatePresence>
47          <div className="flex min-h-12 w-full flex-wrap items-center gap-1 rounded-xl border bg-background p-2">
48            {selectedTag?.map((tag) => (
49              <motion.div
50                animate={
51                  shouldReduceMotion
52                    ? { opacity: 1 }
53                    : {
54                        filter: "blur(0px)",
55                        opacity: 1,
56                        y: 0,
57                      }
58                }
59                className="group flex cursor-pointer flex-row items-center justify-center gap-2 rounded-md border bg-primary px-2 py-1 text-primary-foreground group-hover:bg-primary group-hover:text-foreground"
60                exit={
61                  shouldReduceMotion
62                    ? { opacity: 0, transition: { duration: 0 } }
63                    : { filter: "blur(4px)", opacity: 0, y: 20 }
64                }
65                initial={
66                  shouldReduceMotion
67                    ? { opacity: 1 }
68                    : { filter: "blur(4px)", opacity: 0, y: 20 }
69                }
70// … truncated