Shopping Carts 01
Shopping Carts 01 é um componente para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.
Bund UI
MIT
other
O que é
Shopping Carts 01 é um componente para React e Tailwind CSS, da biblioteca Bund UI, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Precisa de
npm i lucide-react
Licença
Este componente vem de Bund UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Shopping Carts 01
import Image from "next/image";
import { Ban, Check, MinusIcon, PlusIcon, SearchIcon, TrashIcon, X } from "lucide-react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CartItem } from "./type";
import { ButtonGroup } from "@/components/ui/button-group";
import { Input } from "@/components/ui/input";
export function CartListItem({ item }: { item: CartItem }) {
return (
<div
key={item.id}
className="bg-muted/50 hover:bg-muted flex items-start space-x-4 rounded-lg p-4">
<div className="relative shrink-0">
<Image
src={item.image}
className="aspect-square size-20 rounded-md object-cover"
width={60}
height={60}
alt={item.title}
unoptimized
/>
</div>
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="space-y-1">
<h3 className="font-semibold">{item.title}</h3>
<div className="text-muted-foreground flex gap-2 text-sm">
<span className="text-xs">
{item.variant} | {item.size}
</span>
{item.in_stock ? (
<Badge variant="outline" className="text-green-600">
<Check className="mr-0.5 size-3" />
In stock
</Badge>
) : (
<Badge variant="outline" className="text-muted-foreground">
<Ban className="mr-0.5 size-3" />
Sold out
</Badge>
)}
</div>
<p className="text-sm">{item.price}</p>
</div>
<div className="flex flex-col space-x-4 sm:flex-row">
<ButtonGroup className="w-30">
<Input defaultValue={1} className="h-8 text-center" readOnly />
<Button variant="outline" size="sm" aria-label="Search">
<PlusIcon />
</Button>
<Button variant="outline" size="sm" aria-label="Search">
<MinusIcon />
</Button>
</ButtonGroup>
<Button variant="ghost" size="icon-sm">
<TrashIcon className="size-4 text-red-600" />
<span className="sr-only">Remove item</span>
</Button>
</div>
</div>
</div>
</div>
);
}
import { CartItem } from "./type";
export const cartItems: CartItem[] = [
{
id: 3,
title: "Classic Hoodie",
price: "$45.00",
variant: "Black",
size: "Medium",
quantity: 1,
image: "/images/products/list1.png",
in_stock: true
},
{
id: 4,
title: "Denim Jacket",
price: "$80.00",
variant: "Blue",
size: "Large",
quantity: 2,
image: "/images/products/list2.png",
in_stock: false
},
{
id: 5,
title: "Slim Fit Jeans",
price: "$50.00",
variant: "Dark Wash",
size: "32",
quantity: 1,
image: "/images/products/list3.png",
in_stock: true
}
];
import { ArrowRightIcon, Info } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { CartListItem } from "./cart-item";
import { cartItems } from "./data";
import { Separator } from "@/components/ui/separator";
export default function ShoppingCart() {
return (
<section className="py-12 lg:py-20">
<div className="container mx-auto px-4">
<header className="mb-4">
<h1 className="font-heading text-3xl">Shopping Cart</h1>
</header>
<Separator />
<div className="mt-6 grid items-start gap-4 lg:grid-cols-3 lg:gap-6">
<div className="space-y-3 lg:col-span-2">
{cartItems.map((item, key) => (
<CartListItem key={key} item={item} />
))}
</div>
{/* Order Summary */}
<div className="bg-muted/50 flex h-full flex-col space-y-6 rounded-lg p-6">
<div className="space-y-4">
<h2 className="font-semibold">Order summary</h2>
<div className="flex justify-between text-sm">
<p>Subtotal</p>
<p className="font-medium">$255.00</p>
</div>
<div className="flex items-center justify-between text-sm">
<div className="flex items-center">
<p>Shipping estimate</p>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="text-muted-foreground ml-1 size-3" />
</TooltipTrigger>
<TooltipContent>Delivery in 10 days is planned.</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<p className="font-medium">$5.00</p>
</div>
<div className="flex items-center justify-between text-sm">
<div className="flex items-center">
<p>Tax estimate</p>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="text-muted-foreground ml-1 size-3" />
</TooltipTrigger>
<TooltipContent>There is a country specific taxation system.</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<p className="font-medium">$4.50</p>
</div>
<div className="flex justify-between border-t border-gray-200 pt-4 text-sm font-medium">
<p>Order total</p>
<p>$264.50</p>
</div>
</div>
<div className="mt-auto">
<Button className="w-full">Checkout</Button>
</div>
</div>
</div>
</div>
</section>
);
}
export type CartItem = {
id: number,
title: string,
price: string,
variant: string,
size: string,
quantity: number,
image: string,
in_stock: boolean,
}