Components
Item Card
Order Item Card A visually polished card component for displaying an order item, featuring interactive controls and smooth animations powered by Framer Motion. It's designed to be easily customizable through props.
import { OrderItemCard } from '@/components/ui/item-card'; // Adjust the import path
export default function OrderItemCardDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<OrderItemCard
title="Cafe Latte"
details={['Large', '2% Milk']}
imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-7k0RkYcIaUhZwlMxeG3wJzvq00QH95.png&w=320&q=75"
imageAlt="A cup of cafe latte with latte art"
initialQuantity={1}
initialShots={3}
onQuantityChange={(quantity) => console.log('New quantity:', quantity)}
/>
</div>
);
}