"use client" import * as React from "react" import { Plane } from "lucide-react" import { activity, ActivityCollapse, ActivityCompact, ActivityExpanded, ActivityGlyph, ActivityReveal, ActivityShared, ActivityTrigger, } from "@/components/ui/activity" const FLIGHT = { number: "KN 512", gate: "B12", seat: "14A", from: { code: "SFO", city: "San Francisco", time: "08:40" }, to: { code: "JFK", city: "New York", time: "17:05" }, } const BOARDING_IN = 18 * 60 function useBoarding() { const [left, setLeft] = React.useState(BOARDING_IN) React.useEffect(() => { const interval = setInterval(() => setLeft((value) => Math.max(0, value - 1)), 1000) return () => clearInterval(interval) }, []) return { left, boarding: left === 0 } } function formatCountdown(seconds: number) { const minutes = Math.floor(seconds / 60) return `${String(minutes).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}` } function PlaneGlyph({ large }: { large: boolean }) { return ( ) } function Endpoint({ stop, align }: { stop: typeof FLIGHT.from; align: "start" | "end" }) { return ( {stop.code} {stop.city} {stop.time} ) } function Detail({ label, children }: { label: string; children: React.ReactNode }) { return ( {label} {children} ) } export function FlightActivity() { const { left, boarding } = useBoarding() const countdown = boarding ? "Now" : formatCountdown(left) return ( <> {FLIGHT.from.code} → {FLIGHT.to.code} Gate {FLIGHT.gate} {countdown}

{FLIGHT.from.code} → {FLIGHT.to.code} {FLIGHT.number} {boarding ? "Boarding" : "On time"}

{FLIGHT.gate} {FLIGHT.seat} Boards in {countdown}

) } export function showFlight() { return activity.show({ id: "flight", view: FlightActivity }) }