"use client"; import { SetStateAction, useState, useEffect } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; const Calendar: React.FC & { size?: number }> = ({ className, size = 20, ...props }) => { return ( ); }; const Alert: React.FC & { size?: number }> = ({ className, size = 20, ...props }) => { return ( ); }; const Inbox: React.FC & { size?: number }> = ({ className, size = 20, ...props }) => { return ( ); }; // Change Here const TABS = [ { id: "Inbox", title: "صندوق", icon: Inbox }, { id: "Planner", title: "برنامه‌ریز", icon: Calendar }, { id: "Alerts", title: "هشدارها", icon: Alert }, ]; export default function DiscreteTabs() { const [activeButton, setActiveButton] = useState(TABS[0].id); return (

{TABS.map((tab) => (

); } function Button({ id, title, ButtonIcon, isActive, setActiveButton, }: { id: string; title: string; ButtonIcon: React.ComponentType< React.SVGProps & { size?: number } >; isActive: boolean; setActiveButton: React.Dispatch>; }) { const [showShine, setShowShine] = useState(false); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { if (isActive && isLoaded) { setShowShine(true); const timer = setTimeout(() => setShowShine(false), 800); return () => clearTimeout(timer); } }, [isActive, isLoaded]); const activeColor = "text-primary"; return ( { setActiveButton(id); setIsLoaded(true); }} className="flex h-fit w-fit" style={{ willChange: "transform" }} > {isActive && ( {title} )} ); }