"use client" import * as React from "react" import { motion } from "motion/react" import { Zap } from "lucide-react" import { activity, ActivityCollapse, ActivityCompact, ActivityExpanded, ActivityGlyph, ActivityReveal, ActivityShared, ActivityTrigger, } from "@/components/ui/activity" const START_LEVEL = 72 const HOLD_LEVEL = 80 const STEP_MS = 1500 const MINUTES_PER_PERCENT = 1.6 const WAVE = "M0 6 Q12.5 0 25 6 T50 6 T75 6 T100 6 T125 6 T150 6 T175 6 T200 6 V12 H0 Z" function useCharge() { const [level, setLevel] = React.useState(START_LEVEL) const [optimised, setOptimised] = React.useState(false) const limit = optimised && level <= HOLD_LEVEL ? HOLD_LEVEL : 100 const holding = optimised && level === HOLD_LEVEL React.useEffect(() => { if (level >= limit) return const timeout = setTimeout(() => setLevel((value) => Math.min(limit, value + 1)), STEP_MS) return () => clearTimeout(timeout) }, [level, limit]) return { level, optimised, holding, full: level >= 100, minutes: Math.round((limit - level) * MINUTES_PER_PERCENT), toggle: () => setOptimised((value) => !value), } } type Charge = ReturnType function status(charge: Charge) { if (charge.full) return "Charged" if (charge.holding) return `Holding at ${HOLD_LEVEL}%` return "Charging" } function detail(charge: Charge) { if (charge.full) return "Unplug whenever you like" if (charge.holding) return "Finishes before you usually unplug" return `Full in ${charge.minutes} min` } function BatteryGlyph({ large }: { large: boolean }) { return ( ) } function Battery({ level }: { level: number }) { return ( ) } function WaveLayer({ level, offset, duration, className, }: { level: number offset: number duration: number className: string }) { return ( ) } function Liquid({ charge }: { charge: Charge }) { return (

{charge.level} % {detail(charge)}

) } function Switch({ on, onToggle, label }: { on: boolean; onToggle: () => void; label: string }) { return ( ) } export function ChargingActivity() { const charge = useCharge() const title = status(charge) return ( <> {title} {charge.level}%

{title} Wireless · 15 W

Optimised charging Pause at {HOLD_LEVEL}% to save the battery ) } export function showCharging() { return activity.show({ id: "charging", view: ChargingActivity }) }