"use client" import { useMemo, useState } from "react" import { AnimatePresence, MotionConfig, motion } from "motion/react" import useMeasure from "react-use-measure" import FamilyButton from "../ui/family-button" export function FamilyButtonDemo() { return (

) } let tabs = [ { id: 0, label: "Apple" }, { id: 1, label: "Spotify" }, ] export function MusicPlayerExample() { const [activeTab, setActiveTab] = useState(0) const [direction, setDirection] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [ref, bounds] = useMeasure() const content = useMemo(() => { switch (activeTab) { case 0: return (

) case 1: return (

) default: return null } }, [activeTab]) const handleTabClick = (newTabId: number) => { if (newTabId !== activeTab && !isAnimating) { const newDirection = newTabId > activeTab ? 1 : -1 setDirection(newDirection) setActiveTab(newTabId) } } 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, i) => ( ))}

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

) }