voltra

import { useLiveActivity } from 'voltra/client'; import { Voltra } from 'voltra'; import React from 'react'; // React is a peer dependency and needed for JSX interface OrderTrackerProps { orderId: string; } export function OrderTracker({ orderId }: OrderTrackerProps) { // Define the UI for the Live Activity/Widget using Voltra components const ui = ( <Voltra.VStack style={{ padding: 16, borderRadius: 14, backgroundColor: '#111827' }}> <Voltra.Text style={{ color: 'white', fontSize: 18, fontWeight: '700' }}>Order #{orderId}</Voltra.Text> <Voltra.Text style={{ color: '#9CA3AF', marginTop: 6 }}>Driver en route · ETA 12 min</Voltra.Text> </Voltra.VStack> ); // Use the useLiveActivity hook to manage the Live Activity lifecycle const { start, update, end } = useLiveActivity( { lockScreen: ui }, // Define the UI for different states (here, just lockScreen) { activityName: `order-${orderId}`, // Unique name for the activity autoStart: true, // Automatically start the activity when the component mounts deepLinkUrl: `/orders/${orderId}` // URL to open when the activity is tapped } ); // In a real application, you might have buttons or logic to call update() or end() // For demonstration, we just return null as the UI is rendered natively. return null; }