App sheets1

1import { Button } from "@/ui/button";
2import {
3  Sheet,
4  SheetClose,
5  SheetContent,
6  SheetDescription,
7  SheetFooter,
8  SheetHeader,
9  SheetTitle,
10  SheetTrigger,
11} from "@/ui/sheet";
12import { Input } from "@/ui/input";
13import { Label } from "@/ui/label";
14 
15export default function CartCheckoutSheet() {
16  return (
17    <Sheet>
18      <SheetTrigger asChild>
19        <Button variant="outline">Open Cart</Button>
20      </SheetTrigger>
21      <SheetContent className="flex w-full flex-col sm:max-w-sm">
22        <SheetHeader>
23          <SheetTitle>Shopping Cart</SheetTitle>
24          <SheetDescription>Review your items and checkout</SheetDescription>
25        </SheetHeader>
26        <div className="flex-1 space-y-4 overflow-y-auto px-4 pb-4">
27          <div className="flex items-center gap-3">
28            <div className="size-12 shrink-0 rounded bg-muted" />
29            <div className="flex-1">
30              <p className="text-sm font-medium">Item One</p>
31              <p className="text-sm text-muted-foreground">Qty 1</p>
32            </div>
33            <p className="font-medium">$19.00</p>
34          </div>
35          <div className="flex items-center gap-3">
36            <div className="size-12 shrink-0 rounded bg-muted" />
37            <div className="flex-1">
38              <p className="text-sm font-medium">Item Two</p>
39              <p className="text-sm text-muted-foreground">Qty 2</p>
40            </div>
41            <p className="font-medium">$39.00</p>
42          </div>
43          <div className="grid gap-2">
44            <Label htmlFor="discount">Discount Code</Label>
45            <Input id="discount" placeholder="SUMMER25" />
46          </div>
47        </div>
48        <SheetFooter className="sticky bottom-0 border-t bg-background">
49          <div className="flex items-center justify-between font-semibold">
50            <span>Subtotal</span>
51            <span>$58.00</span>
52          </div>
53          <Button>Checkout</Button>
54          <SheetClose asChild>
55            <Button variant="outline">Continue Shopping</Button>
56          </SheetClose>
57        </SheetFooter>
58      </SheetContent>
59    </Sheet>
60  );
61}