Components
Loading preview...
Package Tracker Card This component provides a visually appealing card to display package tracking information. It's designed to be highly reusable, accepting props for status, package details, destination, and more.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/tracker-cardimport React from 'react';
import { PackageTrackerCard, PackageTrackerCardProps } from '@/components/ui/tracker-card';
const PolandFlag = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3" className="h-4 w-6 rounded-sm">
<rect width="5" height="3" fill="#fff" />
<rect width="5" height="1.5" y="1.5" fill="#dc143c" />
</svg>
);
const PackageTrackerCardDemo = () => {
const trackingUrl = 'https://21st.dev/track/49029880150810129411';
const cardProps: PackageTrackerCardProps = {
status: 'Out for Delivery',
packageNumber: '49029880150810129411',
destination: 'Poland',
destinationFlag: <PolandFlag />,
date: 'Poland - 01/06/25',
// UPDATED: Using an image URL for the QR code
qrCodeImageUrl: `https://api.qrserver.com/v1/create-qr-code/?size=128x128&data=${encodeURIComponent(trackingUrl)}&bgcolor=none&color=0-0-0`,
packageImage: (
<img
src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-cfG5HFRLtZ568wRFDk8NRn7hzW00fY.png&w=320&q=75"
width={200}
height={200}
className="drop-shadow-lg"
/>
),
onTrackClick: () => alert('Tracking details button clicked!'),
};
return (
<div className="flex h-full min-h-screen w-full items-center justify-center bg-background p-4">
<PackageTrackerCard {...cardProps} />
</div>
);
};
export default PackageTrackerCardDemo;