Drawer

import { ShoppingBag } from "lucide-react";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseDrawer } from "@/components/cruise/drawer";

export default function DrawerExample() {
  return (
    <CruiseDrawer
      side="right"
      sheet
      title="Your cart"
      trigger={
        <CruiseButton variant="secondary">
          <ShoppingBag aria-hidden="true" />
          Open cart
        </CruiseButton>
      }
      footer={<CruiseButton className="w-full">Checkout</CruiseButton>}
    >
      <ul className="flex flex-col gap-4">
        <li className="flex justify-between gap-4 border-b-2 border-ink pb-3">
          <span>Classic Celebration Cake × 1</span>
          <span className="font-display font-bold">₦18,500</span>
        </li>
        <li className="flex justify-between gap-4 border-b-2 border-ink pb-3">
          <span>Cupcake Box (6) × 2</span>
          <span className="font-display font-bold">₦19,000</span>
        </li>
      </ul>
    </CruiseDrawer>
  );
}