"use client"; import React, { useState, useEffect, useCallback } from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; // Change Here const SERVICES = [ { id: "۰۱", title: "طراحی وب", description: "تجربه‌های دیجیتال زیبا، کاربردی و کاربرمحور می‌سازیم.", image: "/unsplash/1539571696357-5a69c17a67c6.webp", }, { id: "۰۲", title: "توسعه با فریمر", description: "سایت‌های پربازده و متحرک با فریمر می‌سازیم.", image: "/unsplash/1541123603104-512919d6a96c.webp", }, { id: "۰۳", title: "برندینگ", description: "هویت بصری و صدای برندتان را برای اثری ماندگار تعریف می‌کنیم.", image: "/unsplash/1541701494587-cb58502866ab.webp", }, ]; const AUTO_PLAY_DURATION = 5000; const slideTransition = { duration: 0.34, ease: [0.32, 0.72, 0, 1] as const, }; const slideVariants = { enter: { y: "-100%" }, center: { y: 0 }, exit: { y: "100%" }, }; export default function VerticalTabs() { const [activeIndex, setActiveIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const handleNext = useCallback(() => { setActiveIndex((prev) => (prev + 1) % SERVICES.length); }, []); const handlePrev = useCallback(() => { setActiveIndex((prev) => (prev - 1 + SERVICES.length) % SERVICES.length); }, []); const handleTabClick = (index: number) => { if (index === activeIndex) return; setActiveIndex(index); setIsPaused(false); }; useEffect(() => { if (isPaused) return; const interval = setInterval(() => { handleNext(); }, AUTO_PLAY_DURATION); return () => clearInterval(interval); }, [activeIndex, isPaused, handleNext]); const active = SERVICES[activeIndex]!; return (

چطور می‌توانم کمکتان کنم

(خدمات)

{SERVICES.map((service, index) => { const isActive = activeIndex === index; return ( ); })}

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} >

); } function GallerySlide({ service, onClick, }: { service: (typeof SERVICES)[number]; onClick: () => void; }) { return ( {service.title}

); }