Dynamic Tag Cloud

1"use client";
2 
3import { motion } from "framer-motion";
4import { useState } from "react";
5 
6type Tag = {
7  id: string;
8  label: string;
9};
10 
11type DynamicTagCloudProps = {
12  tags?: Tag[];
13};
14 
15export function DynamicTagCloud({
16  tags = [
17    { id: "1", label: "React" },
18    { id: "2", label: "TypeScript" },
19    { id: "3", label: "Framer Motion" },
20    { id: "4", label: "TailwindCSS" },
21    { id: "5", label: "Next.js" },
22    { id: "6", label: "Design" },
23  ],
24}: DynamicTagCloudProps) {
25  const [hoveredId, setHoveredId] = useState<string | null>(null);
26 
27  const generateRandomOffset = () => ({
28    x: Math.random() * 20 - 10,
29    y: Math.random() * 20 - 10,
30  });
31 
32  return (
33    <div className="">
34      <div className="flex flex-wrap items-center justify-center gap-3">
35        {tags.map((tag, index) => {
36          const offset = generateRandomOffset();
37          const isHovered = hoveredId === tag.id;
38 
39          return (
40            <motion.button
41              key={tag.id}
42              initial={{
43                x: offset.x,
44                y: offset.y,
45                opacity: 0,
46                scale: 0.8,
47              }}
48              animate={{
49                x: isHovered ? offset.x * 1.5 : offset.x,
50                y: isHovered ? offset.y * 1.5 : offset.y,
51                opacity: 1,
52                scale: isHovered ? 1.1 : 1,
53              }}
54              whileHover={{
55                scale: 1.15,
56                zIndex: 10,
57              }}
58              transition={{
59                type: "spring",
60                stiffness: 200,
61                damping: 20,
62                delay: index * 0.05,
63              }}
64              onHoverStart={() => setHoveredId(tag.id)}
65              onHoverEnd={() => setHoveredId(null)}
66              className="rounded-full border border-border bg-muted px-4 py-2 text-sm font-medium transition-colors hover:bg-primary hover:text-primary-foreground"
67            >
68              {tag.label}
69            </motion.button>
70          );
71        })}
72      </div>
73    </div>
74  );
75}