"use client"; import { useState } from "react"; import { motion, AnimatePresence } from "motion/react"; import { Input } from "../../../components/ui/input"; import { HugeiconsIcon } from "@hugeicons/react"; import { ArrowLeft02Icon, UnfoldMoreIcon, Album02Icon, SparklesIcon, } from "@hugeicons/core-free-icons"; interface PlaceholderConfig { id: number; placeholder: string; icon: any; } // Change Here const placeholderOptions: PlaceholderConfig[] = [ { id: 1, placeholder: "هر چیزی جستجو کنید...", icon: SparklesIcon }, { id: 2, placeholder: "تولید تصویر", icon: Album02Icon }, ]; /** Whole-string / word stagger — never per-glyph: Arabic/Persian joining breaks in inline-block letters. */ const AnimatedPlaceholder = ({ text }: { text: string }) => { const parts = text.split(/(\s+)/).filter((part) => part.length > 0); return ( {parts.map((part, index) => { const isSpace = /^\s+$/.test(part); return ( {isSpace ? "\u00A0".repeat(part.length) : part} ); })} ); }; const InputSwitch = () => { const [activeIndex, setActiveIndex] = useState(0); const [inputValue, setInputValue] = useState(""); const currentConfig = placeholderOptions[activeIndex]; const handleIconClick = () => { setActiveIndex((prev) => (prev + 1) % placeholderOptions.length); }; const IconComponent = currentConfig.icon; return (

{!inputValue && (

)} setInputValue(e.target.value)} className="m-0 !border-0 border-none bg-transparent! !ps-1.5 text-sm text-foreground outline-none focus-visible:ring-0 focus-visible:ring-offset-0" />

); }; export default InputSwitch;