4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1e96,"use client"; import { useEffect, useState } from "react"; import { useTheme } from "next-themes"; import { Clock3, House, Store, Utensils, Truck, UserRound } from "lucide-react"; import { Map, MapMarker, MapRoute, MarkerContent, RouteMarker, RouteProgress, } from "@/components/ui/map"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { buildRouteUrl, deliveryMeals, dropoff, mapView, pickup, progressFraction, routeStyle, type OsrmRouteData, } from "./data"; function formatDistance(meters?: number) { if (!meters) return "--"; if (meters < 1000) return `${Math.round(meters)} m`; return `${(meters / 1000).toFixed(1)} km`; } function formatDuration(seconds?: number) { if (!seconds) return "--"; const minutes = Math.round(seconds / 60); if (minutes < 60) return `${minutes} min`; const hours = Math.floor(minutes / 60); const remainingMinutes = minutes % 60; return `${hours}h ${remainingMinutes}m`; } export default function Page() { const [routeData, setRouteData] = useState(null); const [loading, setLoading] = useState(true); const { resolvedTheme } = useTheme(); const remainingRouteColor = resolvedTheme === "dark" ? routeStyle.remaining.color.dark : routeStyle.remaining.color.light; useEffect(() => { async function fetchRoute() { setLoading(true); try { const response = await fetch(buildRouteUrl(pickup, dropoff)); const data = await response.json(); const route = data?.routes?.[0]; if (!route?.geometry?.coordinates) return; setRouteData({ coordinates: route.geometry.coordinates as [number, number][], duration: route.duration as number, distance: route.distance as number, }); } catch (error) { console.error("Failed to fetch route:", error); } finally { setLoading(false); } } fetchRoute(); }, []); return (

Track Delivery

Mon Feb 10 - 2-3 PM

Order items ({deliveryMeals.length}) {deliveryMeals.map((meal) => (

{meal.name}

{meal.price}

x{meal.quantity}

))}

Bundle total $189.00

Pickup confirmed

Mon, Feb 10 at 1:48 PM

Remaining travel

{formatDuration(routeData?.duration)} {" · "} {formatDistance(routeData?.distance)}

{formatDuration(routeData?.duration)} away

); } 52:T683,export interface DeliveryMeal { name: string; price: string; quantity: number; } export interface OsrmRouteData { coordinates: [number, number][]; duration: number; distance: number; } export const deliveryMeals: DeliveryMeal[] = [ { name: "Spicy Tofu Grain Bowl", price: "$44.00", quantity: 1 }, { name: "Herb Chicken Rice Box", price: "$58.00", quantity: 2 }, { name: "Roasted Veggie Wrap", price: "$29.00", quantity: 1 }, ]; /** Pickup (origin) and dropoff (destination) coordinates. */ export const pickup = { lng: -122.4185, lat: 37.7645 }; export const dropoff = { lng: -122.434, lat: 37.7475 }; /** Initial map viewport. */ export const mapView = { center: [-122.4263, 37.756] as [number, number], zoom: 13.6, minZoom: 12, maxZoom: 15, }; /** Fraction of the route the courier has already covered (0–1). */ export const progressFraction = 0.62; /** * OSRM demo routing endpoint. Swap in your own routing service by returning a * URL that responds with GeoJSON route geometry. */ export function buildRouteUrl( from: { lng: number; lat: number }, to: { lng: number; lat: number }, ) { return `https://router.project-osrm.org/route/v1/driving/${from.lng},${from.lat};${to.lng},${to.lat}?overview=full&geometries=geojson`; } /** * Route line styling. WebGL paint can't read CSS variables, so colors are * concrete hex. `progress` highlights the covered path; `remaining` is themed * for the road still ahead. */ export const routeStyle = { progress: { color: "#3b82f6", width: 6, opacity: 0.95 }, remaining: { width: 5.2, opacity: 0.5, color: { light: "#6b7280", dark: "#9ca3af" }, }, } as const; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@mapcn","registryDependencies":["@mapcn/map","card","badge","button"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/delivery-tracker/page.tsx","content":"$51","type":"registry:page","target":"app/delivery/page.tsx"},{"path":"src/registry/blocks/delivery-tracker/data.ts","content":"$52","type":"registry:component","target":"app/delivery/data.ts"}],"className":"h-[70svh] min-h-80"}]]}]