Components
Loading preview...
Order Status Tracker This component provides a detailed view of an order's status, including the item, summary, and tracking actions. It is designed to be highly reusable by accepting all its content through props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/order-status-trackerimport { OrderStatus } from "@/components/ui/order-status-tracker";
export default function OrderStatusDemo() {
// Sample data to populate the component
const orderData = {
illustrationUrl: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-HNciDluT0NAzIwovOE2g7EpZORt7CQ.png&w=320&q=75",
statusTitle: "Order Status",
statusDescription: "Your package is on the way",
item: {
imageUrl: "https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=64&h=64&fit=crop&q=80",
name: "Apple Watch",
details: "Color: Grey",
price: 1500.00,
},
summary: [
{ label: "Order ID", value: "153468790876" },
{ label: "Shipping Address", value: "45 Onye's House" },
{ label: "Tracking ID", value: "153468790876" },
{ label: "Estimated Delivery", value: "11/03/25; 04:54pm" },
],
trackingStatus: "Your order is confirmed and in transit",
};
const handleTrackOrder = () => {
// In a real app, this would trigger navigation or a modal
console.log("Track order button clicked!");
alert("Tracking functionality would be implemented here.");
};
return (
<div className="flex items-center justify-center h-full bg-background p-4">
<OrderStatus
illustrationUrl={orderData.illustrationUrl}
statusTitle={orderData.statusTitle}
statusDescription={orderData.statusDescription}
item={orderData.item}
summary={orderData.summary}
trackingStatus={orderData.trackingStatus}
onTrackOrder={handleTrackOrder}
/>
</div>
);
}