Changes

src/components/CartDrawer.tsx

@@ -0,0 +1,149 @@
+import { useState, useEffect } from "react";
+import { ShoppingCart, Trash2, ExternalLink, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { useCartStore } from "@/stores/cartStore";
+
+export const CartDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { items, isLoading, isSyncing, removeItem, clearCart, getCheckoutUrl, syncCart } = useCartStore();
+  
+  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
+  const totalPrice = items.reduce((sum, item) => sum + (parseFloat(item.price.amount) * item.quantity), 0);
+
+  // Sync cart with Shopify when drawer opens
+  useEffect(() => {
+    if (isOpen) syncCart();
+  }, [isOpen, syncCart]);
+
+  const handleCheckout = () => {
+    const checkoutUrl = getCheckoutUrl();
+    if (checkoutUrl) {
+      window.open(checkoutUrl, '_blank');
+      setIsOpen(false);
+    }
+  };
+
+  const handleRemoveItem = async (variantId: string) => {
+    await removeItem(variantId);
+  };
+
+  if (totalItems === 0) {
+    return null;
+  }
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="icon" className="relative">
+          <ShoppingCart className="h-5 w-5" />
+          {totalItems > 0 && (
+            <Badge className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs bg-primary text-primary-foreground">
+              {totalItems}
+            </Badge>
+          )}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-full sm:max-w-md flex flex-col h-full">
+        <SheetHeader className="flex-shrink-0">
+          <SheetTitle>Varukorg</SheetTitle>
+          <SheetDescription>
+            {totalItems === 0 ? "Din varukorg är tom" : `${totalItems} produkt${totalItems !== 1 ? 'er' : ''} i varukorgen`}
+          </SheetDescription>
+        </SheetHeader>
+        
+        <div className="flex flex-col flex-1 pt-6 min-h-0">
+          {items.length === 0 ? (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <ShoppingCart className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+                <p className="text-muted-foreground">Din varukorg är tom</p>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="flex-1 overflow-y-auto pr-2 min-h-0">
+                <div className="space-y-4">
+                  {items.map((item) => (
+                    <div key={item.variantId} className="flex gap-4 p-3 bg-muted/30 rounded-lg">
+                      <div className="flex-1 min-w-0">
+                        <h4 className="font-medium text-sm truncate">
+                          {item.product.node.title}
+                        </h4>
+                        <p className="text-sm text-muted-foreground">
+                          Antal: {item.quantity}
+                        </p>
+                        <p className="font-semibold text-primary">
+                          {parseFloat(item.price.amount).toLocaleString('sv-SE')} {item.price.currencyCode}
+                        </p>
+                      </div>
+                      <div className="flex flex-col items-end justify-center">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                          onClick={() => handleRemoveItem(item.variantId)}
+                          disabled={isLoading}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              
+              <div className="flex-shrink-0 space-y-4 pt-4 border-t bg-background">
+                <div className="flex justify-between items-center">
+                  <span className="text-lg font-semibold">Totalt</span>
+                  <span className="text-xl font-bold text-primary">
+                    {totalPrice.toLocaleString('sv-SE')} {items[0]?.price.currencyCode || 'SEK'}
+                  </span>
+                </div>
+                
+                <Button
+                  onClick={handleCheckout}
+                  className="w-full"
+                  size="lg"
+                  disabled={items.length === 0 || isLoading || isSyncing}
+                >
+                  {isLoading || isSyncing ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : (
+                    <>
+                      <ExternalLink className="w-4 h-4 mr-2" />
+                      Gå till betalning
+                    </>
+                  )}
+                </Button>
+                
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    clearCart();
+                    setIsOpen(false);
+                  }}
+                  className="w-full text-muted-foreground"
+                  disabled={isLoading}
+                >
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  Töm varukorg
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default CartDrawer;

src/components/Header.tsx

@@ -1,4 +1,5 @@
 import AccountMenu from "./AccountMenu";
+import CartDrawer from "./CartDrawer";
 
 const Header = () => {
   return (
@@ -11,7 +12,10 @@ const Header = () => {
             src="/lovable-uploads/bc36fcd7-0c6f-48d2-9921-4323413739c7.png"
           />
         </a>
-        <AccountMenu />
+        <div className="flex items-center gap-3">
+          <CartDrawer />
+          <AccountMenu />
+        </div>
       </div>
     </header>
   );