Working state: Serbian at root (/), English at /en, proper i18n structure

src/components/cart/CartDrawer.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { useCartStore } from "@/stores/cartStore";
+import { formatPrice } from "@/lib/woocommerce";
+
+export default function CartDrawer() {
+  const { items, isOpen, closeCart, removeItem, updateQuantity, getTotal } = useCartStore();
+
+  const total = getTotal();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            className="fixed inset-0 bg-black/50 z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={closeCart}
+          />
+          <motion.div
+            className="fixed top-0 right-0 bottom-0 w-full max-w-md bg-white z-50 shadow-xl flex flex-col"
+            initial={{ x: "100%" }}
+            animate={{ x: 0 }}
+            exit={{ x: "100%" }}
+            transition={{ type: "tween", duration: 0.3 }}
+          >
+            <div className="flex items-center justify-between p-6 border-b border-border/30">
+              <h2 className="text-xl font-serif">Your Cart</h2>
+              <button
+                onClick={closeCart}
+                className="p-2"
+                aria-label="Close cart"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-6">
+              {items.length === 0 ? (
+                <div className="text-center py-12">
+                  <p className="text-foreground-muted mb-6">Your cart is empty</p>
+                  <Link
+                    href="/en/products"
+                    onClick={closeCart}
+                    className="inline-block px-6 py-3 bg-foreground text-white"
+                  >
+                    Continue Shopping
+                  </Link>
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  {items.map((item) => (
+                    <div key={item.id} className="flex gap-4">
+                      <div className="w-20 h-20 bg-background-ice relative flex-shrink-0">
+                        {item.image && (
+                          <Image
+                            src={item.image}
+                            alt={item.name}
+                            fill
+                            className="object-cover"
+                          />
+                        )}
+                      </div>
+                      <div className="flex-1">
+                        <h3 className="font-serif text-sm">{item.name}</h3>
+                        <p className="text-foreground-muted text-sm mt-1">
+                          {formatPrice(item.price)}
+                        </p>
+                        <div className="flex items-center gap-3 mt-2">
+                          <button
+                            onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                            className="w-8 h-8 border border-border flex items-center justify-center"
+                          >
+                            -
+                          </button>
+                          <span>{item.quantity}</span>
+                          <button
+                            onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                            className="w-8 h-8 border border-border flex items-center justify-center"
+                          >
+                            +
+                          </button>
+                          <button
+                            onClick={() => removeItem(item.id)}
+                            className="ml-auto text-foreground-muted hover:text-red-500"
+                          >
+                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {items.length > 0 && (
+              <div className="p-6 border-t border-border/30">
+                <div className="flex items-center justify-between mb-4">
+                  <span className="font-serif">Subtotal</span>
+                  <span className="font-serif text-lg">{formatPrice(total.toString())}</span>
+                </div>
+                <a
+                  href="https://manoonoils.com/checkout"
+                  className="block w-full py-3 bg-foreground text-white text-center font-medium hover:bg-accent-dark transition-colors"
+                >
+                  Checkout
+                </a>
+              </div>
+            )}
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}