From 3f2d7caf1d9a951b2ebfb2de240a837870cc67e0 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:10:57 +0330
Subject: [PATCH] added cart item

---
 frontend/components/cart/CartItem.vue | 138 ++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 frontend/components/cart/CartItem.vue

diff --git a/frontend/components/cart/CartItem.vue b/frontend/components/cart/CartItem.vue
new file mode 100644
index 0000000..df74af6
--- /dev/null
+++ b/frontend/components/cart/CartItem.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// state
+
+const counter = ref(1);
+
+// methods
+
+const handleDeleteFromCart = () => {};
+</script>
+
+<template>
+    <div
+        class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-gray-300 rounded-xl bg-gray-50"
+    >
+        <div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
+            <div
+                class="size-[88px] aspect-square shrink-0 rounded-100 border border-gray-300 overflow-hidden"
+            >
+                <img
+                    src="../assets/images/products/product-1.png"
+                    class="object-cover size-full"
+                    alt="product"
+                />
+            </div>
+
+            <div class="flex flex-col w-full gap-4">
+                <span class="font-semibold lg:text-[1.125rem] text-gray-900">
+                    فشارسنج بازویی امرن Omron M3
+                </span>
+
+                <div class="items-center justify-between hidden w-full lg:flex">
+                    <div class="flex items-center">
+                        <button
+                            @click="counter++"
+                            class="border size-10 flex-center rounded-100 border-gray-400"
+                        >
+                            <Icon name="bi:plus" class="**:stroke-gray-800" />
+                        </button>
+
+                        <div class="size-10 flex-center">{{ counter }}</div>
+
+                        <button
+                            @click="
+                                counter > 1 ? counter-- : handleDeleteFromCart
+                            "
+                            class="border size-10 flex-center rounded-100 border-gray-400"
+                        >
+                            <Icon
+                                v-if="counter == 1"
+                                name="bi:dash"
+                                class="**:stroke-gray-800"
+                            />
+                            <Icon
+                                v-else
+                                name="bi:trash"
+                                class="**:fill-red-700"
+                            />
+                        </button>
+                    </div>
+
+                    <span class="text-[1.25rem] text-gray-900 font-semibold">
+                        ۲,۸۹۱,۰۰۰&nbsp;تومان
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="flex items-center justify-between w-full lg:hidden">
+            <div class="flex items-center">
+                <button
+                    class="border size-10 flex-center rounded-100 border-gray-400"
+                >
+                    <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        class="stroke-gray-800"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M3.33334 8H12.6667"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                        <path
+                            d="M8 3.33325V12.6666"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                    </svg>
+                </button>
+
+                <div class="size-10 text-[1.125rem] flex-center">1</div>
+
+                <button
+                    class="border size-10 flex-center rounded-100 border-gray-400"
+                >
+                    <svg
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        class="stroke-status-error-primary"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M2 4H14"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                        <path
+                            d="M12.6667 4V13.3333C12.6667 14 12 14.6667 11.3333 14.6667H4.66668C4.00001 14.6667 3.33334 14 3.33334 13.3333V4"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                        <path
+                            d="M5.33334 3.99992V2.66659C5.33334 1.99992 6.00001 1.33325 6.66668 1.33325H9.33334C10 1.33325 10.6667 1.99992 10.6667 2.66659V3.99992"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        ></path>
+                    </svg>
+                </button>
+            </div>
+
+            <span class="text-[1.125rem] text-gray-900 font-semibold">
+                ۲,۸۹۱,۰۰۰&nbsp;تومان
+            </span>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>