"use client" import { ReactNode, useMemo, useState } from "react" import { AnimatePresence, motion, MotionConfig } from "motion/react" import useMeasure from "react-use-measure" import { cn } from "@/lib/utils" type Tab = { id: number label: string content: ReactNode } interface OgImageSectionProps { tabs: Tab[] className?: string /** Outer container radius (e.g. `rounded-lg`) */ rounded?: string /** Inner tab/bubble radius — should be outer radius minus container padding (~3px) */ roundedInner?: string onChange?: () => void } function DirectionAwareTabs({ tabs, className, rounded, roundedInner, onChange, }: OgImageSectionProps) { const [activeTab, setActiveTab] = useState(0) const [direction, setDirection] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [ref, bounds] = useMeasure() const content = useMemo(() => { const activeTabContent = tabs.find((tab) => tab.id === activeTab)?.content return activeTabContent || null }, [activeTab, tabs]) const handleTabClick = (newTabId: number) => { if (newTabId !== activeTab && !isAnimating) { const newDirection = newTabId > activeTab ? 1 : -1 setDirection(newDirection) setActiveTab(newTabId) onChange ? onChange() : null } } const variants = { initial: (direction: number) => ({ x: 300 * direction, opacity: 0, filter: "blur(4px)", }), active: { x: 0, opacity: 1, filter: "blur(0px)", }, exit: (direction: number) => ({ x: -300 * direction, opacity: 0, filter: "blur(4px)", }), } return (

{tabs.map((tab) => ( ))}

setIsAnimating(false)} > setIsAnimating(true)} onAnimationComplete={() => setIsAnimating(false)} > {content}

) } export { DirectionAwareTabs }

Direction Aware Tabs

Instalação

Dependências