"use client" import * as React from "react" import { motion } from "motion/react" import { ArrowUp, Check, Laptop } from "lucide-react" import { activity, ActivityButton, ActivityCollapse, ActivityCompact, ActivityDismiss, ActivityExpanded, ActivityGlyph, ActivityProgress, ActivityReveal, ActivityShared, ActivityTrigger, } from "@/components/ui/activity" import { GradientOrb } from "@/components/ui/gradient-orb" const RECIPIENT = "Ava" const FILES = [ { name: "Lisbon-01.heic", size: 38, cover: "linear-gradient(135deg, #fb923c, #f43f5e)" }, { name: "Lisbon-02.heic", size: 42, cover: "linear-gradient(135deg, #38bdf8, #6366f1)" }, { name: "Tram ride.mov", size: 48, cover: "linear-gradient(135deg, #a3e635, #14b8a6)" }, ] const TOTAL = FILES.reduce((sum, file) => sum + file.size, 0) const TICK_MS = 200 const PACKETS = 4 function useTransfer() { const [ticks, setTicks] = React.useState(0) const speed = 15 + Math.sin(ticks / 4) * 4 const sent = Math.min(TOTAL, ticks * 3.4) const done = sent >= TOTAL React.useEffect(() => { if (done) return const interval = setInterval(() => setTicks((value) => value + 1), TICK_MS) return () => clearInterval(interval) }, [done]) return { sent, done, speed, progress: sent / TOTAL, secondsLeft: Math.ceil((TOTAL - sent) / speed) } } type Transfer = ReturnType function fileProgress(index: number, sent: number) { const before = FILES.slice(0, index).reduce((sum, file) => sum + file.size, 0) return Math.min(1, Math.max(0, (sent - before) / FILES[index].size)) } function SendDial({ transfer, large }: { transfer: Transfer; large: boolean }) { const size = large ? "size-12" : "size-9" const Icon = transfer.done ? Check : ArrowUp return ( {!transfer.done && } ) } function Packets({ done }: { done: boolean }) { return ( {done ? ( ) : ( Array.from({ length: PACKETS }, (_, index) => ( )) )} ) } function Device({ label, children }: { label: string; children: React.ReactNode }) { return ( {children} {label} ) } function FileRow({ index, sent }: { index: number; sent: number }) { const file = FILES[index] const progress = fileProgress(index, sent) return (

{/* Queued files dim their artwork and name, not the whole row, so the text stays readable. */} {file.name} {file.size} MB {progress === 1 ? ( ) : ( )}

) } export function ShareActivity() { const transfer = useTransfer() const title = transfer.done ? `Sent to ${RECIPIENT}` : `Sending to ${RECIPIENT}` return ( <> {title} {FILES.map((file, index) => ( 0 ? "-ml-2" : ""}`} style={{ background: file.cover }} /> ))} {transfer.done ? "Done" : `${Math.round(transfer.progress * 100)}%`}

{title} {transfer.done ? `${FILES.length} files, ${TOTAL} MB` : `${Math.round(transfer.sent)} of ${TOTAL} MB · ${transfer.secondsLeft} sec left`} {transfer.done && }

))}

{transfer.done ? ( Show in folder ) : ( {transfer.speed.toFixed(1)} MB/s over Wi-Fi )} ) } export function showShare() { return activity.show({ id: "share", view: ShareActivity }) }