family-button-demo

1"use client"
2 
3import { useMemo, useState } from "react"
4import { AnimatePresence, motion, MotionConfig } from "motion/react"
5import useMeasure from "react-use-measure"
6 
7import FamilyButton from "../ui/family-button"
8 
9export default function FamilyButtonDemo() {
10  return (
11    <div className=" w-full h-full min-h-[240px]">
12      <div className="absolute bottom-4 right-4 ">
13        <FamilyButton>
14          <MusicPlayerExample />
15        </FamilyButton>
16      </div>
17    </div>
18  )
19}
20 
21let tabs = [
22  { id: 0, label: "Apple" },
23  { id: 1, label: "Spotify" },
24]
25 
26export function MusicPlayerExample() {
27  const [activeTab, setActiveTab] = useState(0)
28  const [direction, setDirection] = useState(0)
29  const [isAnimating, setIsAnimating] = useState(false)
30  const [ref, bounds] = useMeasure()
31 
32  const content = useMemo(() => {
33    switch (activeTab) {
34      case 0:
35        return (
36          <div className="flex items-center justify-center">
37            <svg
38              xmlns="http://www.w3.org/2000/svg"
39              xmlSpace="preserve"
40              viewBox="0 0 361 361"
41              width="5em"
42              height="5em"
43            >
44              <linearGradient
45                id="a"
46                x1={180}
47                x2={180}
48                y1={358.605}
49                y2={7.759}
50                gradientUnits="userSpaceOnUse"
51              >
52                <stop
53                  offset={0}
54                  style={{
55                    stopColor: "#fa233b",
56                  }}
57                />
58                <stop
59                  offset={1}
60                  style={{
61                    stopColor: "#fb5c74",
62                  }}
63                />
64              </linearGradient>
65              <path
66// … truncated