Fix shopify cart

components/commerce/cart-drawer.tsx

@@ -4,17 +4,34 @@ import React from 'react';
 import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
+import { X, ImageIcon, Minus, Plus } from 'lucide-react';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
-  SheetBody,
-  SheetFooter,
 } from '@/components/ui/sheet';
 
 const CartDrawer: React.FC = () => {
-  const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
+  const {
+    isOpen,
+    closeCart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading,
+    removeItem,
+    updateItemQuantity,
+  } = useShopifyCart();
 
   const handleCheckout = () => {
     if (checkoutUrl) {
@@ -22,42 +39,57 @@ const CartDrawer: React.FC = () => {
     }
   };
 
-  const getItemImage = (item: typeof items[0]) => {
+  const getItemImage = (item: (typeof items)[0]) => {
     return item.merchandise.image?.url;
   };
 
-  const getSelectedOptions = (item: typeof items[0]) => {
+  const getSelectedOptions = (item: (typeof items)[0]) => {
     return item.merchandise.selectedOptions ?? [];
   };
 
   return (
-    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()} side="right">
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
-      <SheetContent className="w-full sm:max-w-md">
+      <SheetContent
+        side="right"
+        className="w-full max-w-md"
+        showCloseButton={false}
+      >
         {/* Header */}
-        <SheetHeader>
+        <SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center border-b border-border">
-          <SheetTitle className="text-base">
+          <div className="flex items-center justify-between w-full">
-            Shopping Cart ({itemCount})
+            <SheetTitle className="text-base">
-          </SheetTitle>
+              Shopping Cart ({itemCount})
+            </SheetTitle>
+            <Button onClick={closeCart} variant="ghost" size="icon-sm">
+              <X size={20} />
+            </Button>
+          </div>
         </SheetHeader>
 
         {/* Cart Items */}
-        <SheetBody>
+        <div className="flex-1 overflow-y-auto px-6 py-4">
           {loading && items.length === 0 ? (
             <div className="flex items-center justify-center py-12">
               <Spinner size="lg" />
             </div>
           ) : items.length === 0 ? (
-            <div className="text-center py-12">
+            <Empty className="border-0">
-              <i className="ri-shopping-cart-line text-6xl text-gray-300 mb-4 block"></i>
+              <EmptyContent>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
+                <EmptyHeader>
-              <p className="text-gray-500 mb-6">Add some products to get started!</p>
+                  <EmptyTitle>Your cart is empty</EmptyTitle>
-              <Button
+                  <EmptyDescription>
-                onClick={closeCart}
+                    Add some products to get started!
-                className="font-heading"
+                  </EmptyDescription>
-              >
+                </EmptyHeader>
-                Continue Shopping
+                <Button
-              </Button>
+                  onClick={closeCart}
-            </div>
+                  variant="outline"
+                  className="rounded-full"
+                >
+                  Continue Shopping
+                </Button>
+              </EmptyContent>
+            </Empty>
           ) : (
             <div className="space-y-6">
               {items.map((item) => {
@@ -65,7 +97,10 @@ const CartDrawer: React.FC = () => {
                 const selectedOptions = getSelectedOptions(item);
 
                 return (
-                  <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
+                  <div
+                    key={item.id}
+                    className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0"
+                  >
                     {/* Product Image */}
                     <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                       {image ? (
@@ -76,7 +111,7 @@ const CartDrawer: React.FC = () => {
                         />
                       ) : (
                         <div className="w-full h-full flex items-center justify-center text-gray-400">
-                          <i className="ri-image-line text-2xl"></i>
+                          <ImageIcon size={24} />
                         </div>
                       )}
                     </div>
@@ -93,7 +128,9 @@ const CartDrawer: React.FC = () => {
                           {selectedOptions.map((option, index) => (
                             <span key={option.name}>
                               {option.value}
-                              {index < selectedOptions.length - 1 ? ' / ' : ''}
+                              {index < selectedOptions.length - 1
+                                ? ' / '
+                                : ''}
                             </span>
                           ))}
                         </div>
@@ -103,25 +140,29 @@ const CartDrawer: React.FC = () => {
                       <div className="flex items-center mt-3">
                         <div className="flex items-center border border-gray-300 rounded-lg">
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity - 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={item.quantity <= 1 || loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-subtract-line text-sm"></i>
+                            <Minus size={14} />
                           </Button>
                           <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                             {item.quantity}
                           </span>
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity + 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-add-line text-sm"></i>
+                            <Plus size={14} />
                           </Button>
                         </div>
                       </div>
@@ -141,9 +182,9 @@ const CartDrawer: React.FC = () => {
                         variant="ghost"
                         size="icon-sm"
                         disabled={loading}
-                        className="text-gray-400 hover:text-red-500"
+                        className="text-gray-400 hover:text-gray-700"
                       >
-                        <i className="ri-delete-bin-line text-lg"></i>
+                        <X size={18} />
                       </Button>
                     </div>
                   </div>
@@ -151,11 +192,11 @@ const CartDrawer: React.FC = () => {
               })}
             </div>
           )}
-        </SheetBody>
+        </div>
 
         {/* Footer - Checkout Section */}
         {items.length > 0 && (
-          <SheetFooter className="flex-col sm:flex-col sm:justify-start gap-0">
+          <div className="border-t border-border p-6">
             {/* Subtotal */}
             <div className="flex items-center justify-between mb-4">
               <span className="text-base font-semibold">Subtotal</span>
@@ -178,7 +219,7 @@ const CartDrawer: React.FC = () => {
               >
                 {loading ? (
                   <span className="flex items-center justify-center space-x-2">
-                    <Spinner size="sm" />
+                    <Loader size={16} />
                     <span>Processing...</span>
                   </span>
                 ) : (
@@ -186,15 +227,11 @@ const CartDrawer: React.FC = () => {
                 )}
               </Button>
 
-              <Button
+              <Button onClick={closeCart} variant="link" className="w-full">
-                onClick={closeCart}
-                variant="link"
-                className="w-full"
-              >
                 Continue Shopping
               </Button>
             </div>
-          </SheetFooter>
+          </div>
         )}
       </SheetContent>
     </Sheet>

components/commerce/product-details.tsx

@@ -6,6 +6,7 @@ import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@/components/ui/loader";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
@@ -191,7 +192,14 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               disabled={!variant || adding}
               className="flex-1 rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
             >
-              {adding ? "Adding…" : "Add to bag"}
+              {adding ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
             </button>
           </div>
 

components/navigation/navigation.tsx

@@ -29,7 +29,6 @@ export function Navigation({
   bannerTone,
 }: NavigationProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [cartOpen, setCartOpen] = useState(false);
   const cart = useShopifyCart();
   const itemCount = cart?.itemCount ?? 0;
 
@@ -109,7 +108,7 @@ export function Navigation({
             )}
             {showCart === "yes" && (
               <button
-                onClick={() => setCartOpen(true)}
+                onClick={() => cart.openCart()}
                 aria-label="Cart"
                 className="relative inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5"
               >
@@ -139,7 +138,7 @@ export function Navigation({
           <SheetHeader>
             <SheetTitle className="text-left">{brand}</SheetTitle>
           </SheetHeader>
-          <nav className="mt-6 flex flex-col gap-1">
+          <nav className="mt-2 flex flex-col gap-1 px-4">
             {links.map((l) => (
               <Link
                 key={l.href + l.label}
@@ -153,90 +152,6 @@ export function Navigation({
         </SheetContent>
       </Sheet>
 
-      {/* Cart drawer */}
-      <Sheet open={cartOpen} onOpenChange={setCartOpen}>
-        <SheetContent side="right" className="flex w-[92vw] max-w-md flex-col">
-          <SheetHeader>
-            <SheetTitle className="text-left">Cart</SheetTitle>
-          </SheetHeader>
-
-          <div className="-mx-6 mt-4 flex-1 overflow-y-auto px-6">
-            {cart?.items?.length ? (
-              <ul className="divide-y divide-border">
-                {cart.items.map((line: any) => (
-                  <li key={line.id} className="flex gap-4 py-4">
-                    <div className="aspect-square h-20 flex-shrink-0 overflow-hidden rounded-md bg-muted">
-                      {line.merchandise?.product?.images?.edges?.[0]?.node?.url ? (
-                        <img
-                          src={line.merchandise.product.images.edges[0].node.url}
-                          alt={line.merchandise.product.title}
-                          className="h-full w-full object-cover"
-                        />
-                      ) : null}
-                    </div>
-                    <div className="flex flex-1 flex-col">
-                      <p className="text-sm font-medium">{line.merchandise?.product?.title}</p>
-                      {line.merchandise?.title && line.merchandise.title !== "Default Title" ? (
-                        <p className="text-xs text-muted-foreground">{line.merchandise.title}</p>
-                      ) : null}
-                      <div className="mt-auto flex items-center justify-between">
-                        <div className="flex items-center gap-2 text-xs">
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity - 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            −
-                          </button>
-                          <span>{line.quantity}</span>
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity + 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            +
-                          </button>
-                        </div>
-                        <span className="text-sm">
-                          {line.merchandise?.price
-                            ? new Intl.NumberFormat("en-US", {
-                                style: "currency",
-                                currency: line.merchandise.price.currencyCode,
-                              }).format(parseFloat(line.merchandise.price.amount) * line.quantity)
-                            : null}
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground">
-                <ShoppingBag size={28} strokeWidth={1.25} />
-                <p>Your cart is empty.</p>
-              </div>
-            )}
-          </div>
-
-          {cart?.items?.length ? (
-            <div className="border-t border-border pt-4">
-              <div className="mb-4 flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">Subtotal</span>
-                <span className="font-medium">
-                  {new Intl.NumberFormat("en-US", {
-                    style: "currency",
-                    currency: cart.cart?.cost?.totalAmount?.currencyCode ?? "USD",
-                  }).format(cart.totalAmount)}
-                </span>
-              </div>
-              <a
-                href={cart.checkoutUrl ?? "#"}
-                className="inline-flex w-full items-center justify-center rounded-full bg-foreground px-4 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90"
-              >
-                Checkout
-              </a>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
     </>
   );
 }

components/ui/sheet.tsx

@@ -1,303 +1,134 @@
-"use client";
+"use client"
 
-import React, { useState, useCallback, useContext, createContext } from 'react';
+import * as React from "react"
-import { createPortal } from 'react-dom';
+import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { motion, AnimatePresence } from 'framer-motion';
+import { XIcon } from "lucide-react"
-import { cn } from '@/lib/utils';
 
-interface SheetContextType {
+import { cn } from "@/lib/utils"
-  open: boolean;
+
-  setOpen: (open: boolean) => void;
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  side: 'top' | 'right' | 'bottom' | 'left';
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-const SheetContext = createContext<SheetContextType | undefined>(undefined);
+function SheetTrigger({
-
+  ...props
-function useSheet() {
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  const context = useContext(SheetContext);
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-  if (!context) {
-    throw new Error('Sheet components must be used within a Sheet');
-  }
-  return context;
 }
 
-interface SheetProps {
+function SheetClose({
-  open?: boolean;
+  ...props
-  onOpenChange?: (open: boolean) => void;
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  children: React.ReactNode;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-  side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-function Sheet({
+function SheetPortal({
-  open: controlledOpen,
+  ...props
-  onOpenChange,
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  children,
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-  side = 'right',
-}: SheetProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : internalOpen;
-
-  const setOpen = useCallback(
-    (newOpen: boolean) => {
-      if (!isControlled) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-
-  return (
-    <SheetContext.Provider value={{ open, setOpen, side }}>
-      {children}
-    </SheetContext.Provider>
-  );
-}
-
-function SheetTrigger(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(true);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-trigger"
-      {...rest}
-      onClick={(e) => {
-        setOpen(true);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetPortal({ children }: { children: React.ReactNode }) {
-  if (typeof document === 'undefined') return null;
-  return createPortal(children, document.body);
 }
 
 function SheetOverlay({
   className,
-  onClick,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  const { setOpen } = useSheet();
-
   return (
-    <motion.div
+    <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
-      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      className={cn(
-      initial={{ opacity: 0 }}
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-      animate={{ opacity: 1 }}
+        className
-      exit={{ opacity: 0 }}
+      )}
-      transition={{ duration: 0.3 }}
-      onClick={(e) => {
-        setOpen(false);
-        onClick?.(e);
-      }}
       {...props}
     />
-  );
+  )
-}
-
-interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  showCloseButton?: boolean;
 }
 
 function SheetContent({
   className,
   children,
+  side = "right",
   showCloseButton = true,
   ...props
-}: SheetContentProps) {
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  const { open, setOpen, side } = useSheet();
+  side?: "top" | "right" | "bottom" | "left"
-
+  showCloseButton?: boolean
-  const sideClasses = {
+}) {
-    right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
-    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
-    top: 'inset-x-0 top-0 h-auto border-b',
-    bottom: 'inset-x-0 bottom-0 h-auto border-t',
-  };
-
-  const slideVariants = {
-    right: {
-      initial: { x: 400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: 400, opacity: 0 },
-    },
-    left: {
-      initial: { x: -400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: -400, opacity: 0 },
-    },
-    top: {
-      initial: { y: -400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: -400, opacity: 0 },
-    },
-    bottom: {
-      initial: { y: 400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: 400, opacity: 0 },
-    },
-  };
-
   return (
     <SheetPortal>
-      <AnimatePresence>
+      <SheetOverlay />
-        {open ? (
+      <SheetPrimitive.Content
-          <>
+        data-slot="sheet-content"
-            <SheetOverlay />
+        className={cn(
-            <motion.div
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-              data-slot="sheet-content"
+          side === "right" &&
-              className={cn(
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-                'bg-background fixed z-50 flex flex-col gap-0 shadow-lg',
+          side === "left" &&
-                sideClasses[side],
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-                className,
+          side === "top" &&
-              )}
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-              variants={slideVariants[side]}
+          side === "bottom" &&
-              initial="initial"
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-              animate="animate"
+          className
-              exit="exit"
+        )}
-              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+        {...props}
-              {...props}
+      >
-            >
+        {children}
-              {children}
+        {showCloseButton && (
-              {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-                <button
+            <XIcon className="size-4" />
-                  data-slot="sheet-close"
+            <span className="sr-only">Close</span>
-                  onClick={() => setOpen(false)}
+          </SheetPrimitive.Close>
-                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+        )}
-                  aria-label="Close"
+      </SheetPrimitive.Content>
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="size-4"
-                  >
-                    <path d="M18 6l-12 12M6 6l12 12" />
-                  </svg>
-                </button>
-              )}
-            </motion.div>
-          </>
-        ) : null}
-      </AnimatePresence>
     </SheetPortal>
-  );
+  )
 }
 
-function SheetClose(
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(false);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-close"
-      {...rest}
-      onClick={(e) => {
-        setOpen(false);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn(
+      className={cn("flex flex-col gap-1.5 p-4", className)}
-        'flex flex-col gap-1.5 p-6 border-b border-border',
-        className
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn(
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-        'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
-        className
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
-    <h2
+    <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
-    <p
+    <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
-}
-
-interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-function SheetBody({ className, children, ...props }: SheetBodyProps) {
-  return (
-    <div
-      data-slot="sheet-body"
-      className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
 }
 
 export {
@@ -309,8 +140,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-  SheetBody,
+}
-  SheetPortal,
-  SheetOverlay,
-  AnimatePresence,
-};

contexts/shopify-context.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { ShoppingBag } from 'lucide-react';
 import {
   createCart,
   getCart,
@@ -9,6 +10,8 @@ import {
   updateCartLines,
 } from '@/hooks/use-shopify-cart';
 import { setShopifyCredentials } from '@/services/shopify/client';
+import CartDrawer from '@/components/commerce/cart-drawer';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 
 const CART_ID_KEY = 'cartId';
 
@@ -200,6 +203,7 @@ export const ShopifyProvider: React.FC<{
       ]);
 
       setCart(updatedCart);
+      setIsOpen(true);
       return updatedCart;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to add item to cart';
@@ -284,6 +288,7 @@ export const ShopifyProvider: React.FC<{
         refreshCart,
       }}>
         {children}
+        <CartDrawer />
       </CartContext.Provider>
     </ShopifyConfigContext.Provider>
   );

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Editor — Shopify Demo</title>
+    <title>Shopify Storefront</title>
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link
       rel="stylesheet"

src/App.tsx

@@ -77,7 +77,6 @@ export default function App() {
           plugins={plugins}
           iframe={{ enabled: true }}
           ui={{
-            showNavBar: false,
             leftSideBarVisible: false,
           }}
           onPublish={handlePublish}

src/globals.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "@fontsource-variable/geist";
 
 @custom-variant dark (&:is(.dark *));