"use client" import * as React from "react" import { Footprints, Heart, Pause, Play } from "lucide-react" import { activity, ActivityButton, ActivityCollapse, ActivityCompact, ActivityExpanded, ActivityGlyph, ActivityProgress, ActivityReveal, ActivityShared, ActivityTrigger, useActivity, } from "@/components/ui/activity" const GOAL_KM = 5 const START = { seconds: 14 * 60 + 20, km: 2.86 } const SECONDS_PER_TICK = 6 const KM_PER_TICK = 0.02 function useRun() { const [running, setRunning] = React.useState(true) const [ticks, setTicks] = React.useState(0) React.useEffect(() => { if (!running) return const interval = setInterval(() => setTicks((value) => value + 1), 1000) return () => clearInterval(interval) }, [running]) const seconds = START.seconds + ticks * SECONDS_PER_TICK const km = START.km + ticks * KM_PER_TICK const bpm = Math.round(148 + Math.sin(ticks / 3) * 6) return { running, toggle: () => setRunning((value) => !value), seconds, km, bpm, progress: Math.min(1, km / GOAL_KM) } } type Run = ReturnType function formatTime(seconds: number) { const minutes = Math.floor(seconds / 60) return `${minutes}:${String(seconds % 60).padStart(2, "0")}` } function formatPace(run: Run) { const perKm = Math.round(run.seconds / run.km) return `${Math.floor(perKm / 60)}'${String(perKm % 60).padStart(2, "0")}"` } function Ring({ run, large }: { run: Run; large: boolean }) { const size = large ? "size-12" : "size-9" return ( ) } function Stat({ label, value, children }: { label: string; value: string; children?: React.ReactNode }) { return ( {label} {children} {value} ) } export function RunActivity() { const { dismiss } = useActivity() const run = useRun() const distance = run.km.toFixed(2) const title = run.running ? "Morning run" : "Paused" return ( <> {title} {distance} km

{title} {Math.round(run.progress * 100)}% of {GOAL_KM} km goal

{distance} km

{run.running ? : } {run.running ? "Pause" : "Resume"} End

) } export function showRun() { return activity.show({ id: "run", view: RunActivity }) }