direction-aware-tabs

1"use client"
2 
3import { ReactNode, useMemo, useState } from "react"
4import { AnimatePresence, motion, MotionConfig } from "motion/react"
5import useMeasure from "react-use-measure"
6 
7import { cn } from "@/lib/utils"
8 
9type Tab = {
10  id: number
11  label: string
12  content: ReactNode
13}
14 
15interface OgImageSectionProps {
16  tabs: Tab[]
17  className?: string
18  /** Outer container radius (e.g. `rounded-lg`) */
19  rounded?: string
20  /** Inner tab/bubble radius — should be outer radius minus container padding (~3px) */
21  roundedInner?: string
22  onChange?: () => void
23}
24 
25function DirectionAwareTabs({
26  tabs,
27  className,
28  rounded,
29  roundedInner,
30  onChange,
31}: OgImageSectionProps) {
32  const [activeTab, setActiveTab] = useState(0)
33  const [direction, setDirection] = useState(0)
34  const [isAnimating, setIsAnimating] = useState(false)
35  const [ref, bounds] = useMeasure()
36 
37  const content = useMemo(() => {
38    const activeTabContent = tabs.find((tab) => tab.id === activeTab)?.content
39    return activeTabContent || null
40  }, [activeTab, tabs])
41 
42  const handleTabClick = (newTabId: number) => {
43    if (newTabId !== activeTab && !isAnimating) {
44      const newDirection = newTabId > activeTab ? 1 : -1
45      setDirection(newDirection)
46      setActiveTab(newTabId)
47      onChange ? onChange() : null
48    }
49  }
50 
51  const variants = {
52    initial: (direction: number) => ({
53      x: 300 * direction,
54      opacity: 0,
55      filter: "blur(4px)",
56    }),
57    active: {
58      x: 0,
59      opacity: 1,
60      filter: "blur(0px)",
61    },
62    exit: (direction: number) => ({
63      x: -300 * direction,
64      opacity: 0,
65      filter: "blur(4px)",
66    }),
67  }
68 
69  return (
70    <div className=" flex flex-col items-center w-full">
71      <div
72        className={cn(
73          "flex space-x-1 border border-none rounded-full cursor-pointer bg-neutral-600 px-[3px] py-[3.2px] shadow-inner-shadow",
74          className,
75          rounded
76        )}
77      >
78        {tabs.map((tab) => (
79          <button
80            key={tab.id}
81            onClick={() => handleTabClick(tab.id)}
82            className={cn(
83              "relative rounded-full px-3.5 py-1.5 text-xs sm:text-sm font-medium text-neutral-200  transition focus-visible:outline-1 focus-visible:ring-1  focus-visible:outline-none flex gap-2 items-center ",
84              activeTab === tab.id
85                ? "text-white"
86                : "hover:text-neutral-300/60  text-neutral-200/80",
87              rounded ? roundedInner : undefined
88            )}
89// … truncated