"use client" import * as React from "react" import { motion } from "motion/react" import { AudioLines, Play, Plus, RotateCcw } from "lucide-react" import { activity, ActivityButton, ActivityCollapse, ActivityCompact, ActivityExpanded, ActivityGlyph, ActivityReveal, ActivityShared, ActivityTrigger, useActivity, } from "@/components/ui/activity" const SONG = { title: "Afterglow", artist: "Kinematic FM" } const LISTEN_MS = 4200 const EQUALIZER = [0.9, 1.3, 0.7, 1.1] function useMatch() { const [found, setFound] = React.useState(false) React.useEffect(() => { if (found) return const timeout = setTimeout(() => setFound(true), LISTEN_MS) return () => clearTimeout(timeout) }, [found]) return { found, listenAgain: () => setFound(false) } } function Rings({ large }: { large: boolean }) { return ( {[0, 1, 2].map((index) => ( ))} ) } function Cover({ large }: { large: boolean }) { return ( ) } function Equalizer() { return ( {EQUALIZER.map((speed, index) => ( ))} ) } export function SongActivity() { const { dismiss } = useActivity() const { found, listenAgain } = useMatch() return ( <> {found ? : } {found ? : } {found ? SONG.title : "Listening…"} {found && · {SONG.artist}} {found ? ( ) : ( )} {found ? ( <>

{SONG.title} {SONG.artist} Matched in 4.2 s

Play ) : ( <>

Listening…

Hold your device near the music Cancel )} ) } export function showSong() { return activity.show({ id: "song", view: SongActivity }) }