Vertical Tabs

1"use client";
2 
3import React, { useState, useEffect, useCallback } from "react";
4import { motion, AnimatePresence } from "motion/react";
5import { cn } from "@/lib/utils";
6import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
7import { HugeiconsIcon } from "@hugeicons/react";
8 
9// Change Here
10const SERVICES = [
11  {
12    id: "01",
13    title: "Web Design",
14    description:
15      "Creating beautiful, functional, and user-centric digital experiences.",
16    image:
17      "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1200",
18  },
19  {
20    id: "02",
21    title: "Framer Development",
22    description: "Building high-performance, animated websites with Framer.",
23    image:
24      "https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=1200",
25  },
26  {
27    id: "03",
28    title: "Branding",
29    description:
30      "Defining your brand's visual identity and voice for a lasting impression.",
31    image:
32      "https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1200",
33  },
34];
35 
36const AUTO_PLAY_DURATION = 5000;
37 
38export default function VerticalTabs() {
39  const [activeIndex, setActiveIndex] = useState(0);
40  const [direction, setDirection] = useState(0);
41  const [isPaused, setIsPaused] = useState(false);
42 
43  const handleNext = useCallback(() => {
44    setDirection(1);
45    setActiveIndex((prev) => (prev + 1) % SERVICES.length);
46  }, []);
47 
48  const handlePrev = useCallback(() => {
49    setDirection(-1);
50    setActiveIndex((prev) => (prev - 1 + SERVICES.length) % SERVICES.length);
51  }, []);
52 
53  const handleTabClick = (index: number) => {
54    if (index === activeIndex) return;
55    setDirection(index > activeIndex ? 1 : -1);
56    setActiveIndex(index);
57    setIsPaused(false);
58  };
59 
60  useEffect(() => {
61    if (isPaused) return;
62 
63    const interval = setInterval(() => {
64      handleNext();
65    }, AUTO_PLAY_DURATION);
66 
67    return () => clearInterval(interval);
68  }, [activeIndex, isPaused, handleNext]);
69 
70  const variants = {
71    enter: (direction: number) => ({
72      y: direction > 0 ? "-100%" : "100%",
73      opacity: 0,
74    }),
75    center: {
76      zIndex: 1,
77      y: 0,
78      opacity: 1,
79    },
80    exit: (direction: number) => ({
81      zIndex: 0,
82      y: direction > 0 ? "100%" : "-100%",
83      opacity: 0,
84    }),
85  };
86 
87  return (
88    <section className="w-full bg-background py-8 md:py-16 lg:py-24">
89      <div className="w-full px-4 md:px-8 lg:px-12 xl:px-20 mx-auto">
90// … truncated