Morphing Input

1"use client";
2 
3import { useState } from "react";
4import { motion, AnimatePresence } from "motion/react";
5import { Input } from "../../../components/ui/input";
6import { HugeiconsIcon } from "@hugeicons/react";
7import {
8  ArrowRight02Icon,
9  UnfoldMoreIcon,
10  Album02Icon,
11  SparklesIcon,
12} from "@hugeicons/core-free-icons";
13 
14interface PlaceholderConfig {
15  id: number;
16  placeholder: string;
17  icon: any;
18}
19 
20// Change Here
21const placeholderOptions: PlaceholderConfig[] = [
22  { id: 1, placeholder: "Search anything...", icon: SparklesIcon },
23  { id: 2, placeholder: "Generate Image", icon: Album02Icon },
24];
25 
26const AnimatedPlaceholder = ({ text }: { text: string }) => {
27  const letters = text.split("");
28 
29  return (
30    <motion.span className="inline-flex overflow-hidden">
31      {letters.map((letter, index) => (
32        <motion.span
33          key={`${text}-${index}`}
34          initial={{
35            opacity: 0,
36            rotateX: "80deg",
37            y: 8,
38            filter: "blur(3px)",
39          }}
40          exit={{
41            opacity: 0,
42            rotateX: "-80deg",
43            filter: "blur(3px)",
44            y: -8,
45          }}
46          animate={{
47            opacity: 1,
48            rotateX: "0deg",
49            y: 0,
50            filter: "blur(0px)",
51          }}
52          transition={{
53            delay: 0.015 * index,
54 
55            type: "spring",
56            damping: 16,
57            stiffness: 240,
58            mass: 1.2,
59          }}
60          style={{
61            willChange: "transform",
62          }}
63          className="inline-block"
64        >
65          {letter === " " ? "\u00A0" : letter}
66        </motion.span>
67      ))}
68    </motion.span>
69  );
70};
71 
72const InputSwitch = () => {
73  const [activeIndex, setActiveIndex] = useState(0);
74  const [inputValue, setInputValue] = useState("");
75  const currentConfig = placeholderOptions[activeIndex];
76 
77  const handleIconClick = () => {
78    setActiveIndex((prev) => (prev + 1) % placeholderOptions.length);
79  };
80 
81  const IconComponent = currentConfig.icon;
82 
83  return (
84    <div className="bg-muted w-full max-w-sm py-1 flex justify-center items-center rounded-full px-1">
85      <motion.button
86        className="bg-background p-2.5 px-2.5 rounded-full flex items-center justify-center gap-1.5 transition-colors overflow-hidden cursor-default shadow-sm"
87        onClick={handleIconClick}
88        whileTap={{ scale: 0.9 }}
89      >
90        <AnimatePresence mode="popLayout" initial={false}>
91          <motion.div
92// … truncated