feat: add page cart

2026-06-23 16:39:57 +03:00
parent d8ea3094a1
commit d9745d972a
3 changed files with 70 additions and 0 deletions
@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import PageLayout from "../components/PageLayout";
+import { getCart } from "../api/index";
+export default function Cart() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    getCart()
+      .then((res) => {
+        setItems(res.data);
+      })
+      .catch(() => setError("Не удалось загрузить товары"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const total = items.reduce((sum, ci) => sum + ci.quantity * ci.item.price, 0);
+
+  if (loading) {
+    return (
+      <PageLayout>
+        <p className="text-white p-6">Загрузка товаров</p>
+      </PageLayout>
+    );
+  }
+  return (
+    <PageLayout>
+      <div className="px-6 md:px-16 text-white mb-6 grow">
+        <h1 className="text-2xl md:text-4xl font-medium uppercase mb-6">
+          Корзина
+        </h1>
+        {error && <p className="text-red-400">{error}</p>}
+        {items.length === 0 ? (
+          <p>Корзина пуста</p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {items.map((ci) => (
+              <div
+                key={ci.id}
+                className="flex items-center justify-between border-b border-white/20 pb-3"
+              >
+                <span className="font-medium ">{ci.item.name}</span>
+                <span>
+                  {ci.quanitity} x {ci.item.price} ={" "}
+                  {ci.quantity * ci.item.price}
+                </span>
+              </div>
+            ))}
+            <div className="mt-6 text-xl font-medium">Итого: {total}р.</div>
+          </div>
+        )}
+      </div>
+    </PageLayout>
+  );
+}