added delivery page

frontend/pages/cart/delivery.vue

@@ -1,14 +1,178 @@
 <script setup lang="ts">
+// meta
+
 definePageMeta({
     layout: "cart",
     pageTitle: "انتخاب آدرس",
     prevPage: { name: "cart", label: "سبد خرید" },
     nextPage: { name: "cart-checkout", label: "تسویه حساب" },
 });
+
+// types
+
+type DeliveryData = {
+    address: Address | null;
+    deliveryMethod: {
+        tipax: boolean;
+        pishtaz: boolean;
+        peyk: boolean;
+    };
+};
+
+// state
+
+const addresses = ref<Address[]>([]);
+
+const deliveryData = ref<DeliveryData>({
+    address: null,
+    deliveryMethod: {
+        peyk: false,
+        pishtaz: true,
+        tipax: false,
+    },
+});
+
+// methods
+
+const handleAddNewAddress = (address: Address) => {
+    addresses.value.push(address);
+};
+
+const handleSelectAddress = (address: Address) => {
+    deliveryData.value.address = { ...address };
+};
 </script>
 
 <template>
-    <div class="flex flex-col w-full gap-6"></div>
+    <div class="flex flex-col w-full gap-5">
+        <AddressItem @add="handleAddNewAddress" />
+        <div v-if="addresses.length > 0" class="flex flex-col w-full gap-6">
+            <span class="typo-sub-h-xl"> آدرس های شما </span>
+            <div class="flex flex-col gap-6 w-full">
+                <AddressItem
+                    v-for="(address, index) in addresses"
+                    :key="index"
+                    :address="address"
+                    @select="handleSelectAddress"
+                    :isSelected="address.id == deliveryData.address?.id"
+                />
+            </div>
+        </div>
+
+        <div
+            class="flex flex-col items-center w-full gap-4 p-4 border border-gray-300 rounded-xl bg-gray-50"
+        >
+            <span
+                class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
+            >
+                زمان و شیوه ارسال
+            </span>
+
+            <label
+                @click="deliveryData.deliveryMethod.pishtaz = true"
+                :class="
+                    deliveryData.deliveryMethod.pishtaz
+                        ? 'ring-cyan-500 ring-offset-2 ring-2'
+                        : ''
+                "
+                class="flex flex-col select-none w-full gap-2 p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-cyan-500 ring-offset-2 focus-within:border-cyan-500 rounded-100 border-gray-300 bg-gray-50"
+            >
+                <div class="flex items-center justify-between w-full">
+                    <div class="flex items-center gap-2.5">
+                        <SwitchRoot
+                            v-model="deliveryData.deliveryMethod.pishtaz"
+                            :defaultValue="false"
+                            class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-cyan-500 border border-slate-300 data-[state=checked]:border-cyan-800/20 rounded-full relative transition-all focus-within:outline-none"
+                        >
+                            <SwitchThumb
+                                class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
+                            />
+                        </SwitchRoot>
+                        <span
+                            class="w-full text-gray-800 text-sm lg:text-[1rem]"
+                            >پست پیشتاز</span
+                        >
+                    </div>
+
+                    <span class="text-gray-800 text-sm lg:text-[1rem]">
+                        ۱۵۰٬۰۰۰ تومان
+                    </span>
+                </div>
+            </label>
+
+            <label
+                class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-cyan-500 ring-offset-2 focus-within:border-cyan-500 rounded-100 border-gray-300 bg-gray-50"
+            >
+                <div class="flex items-center gap-2.5">
+                    <SwitchRoot
+                        v-model="deliveryData.deliveryMethod.tipax"
+                        class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-cyan-500 border border-slate-300 data-[state=checked]:border-cyan-800/20 rounded-full relative transition-all focus-within:outline-none"
+                    >
+                        <SwitchThumb
+                            class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
+                        />
+                    </SwitchRoot>
+                    <span class="w-full text-gray-800 text-sm lg:text-[1rem]"
+                        >تیپاکس</span
+                    >
+                </div>
+
+                <span class="text-gray-800 text-sm lg:text-[1rem]">
+                    ۱۵۰٬۰۰۰ تومان
+                </span>
+            </label>
+
+            <label
+                class="flex items-center opacity-50 select-none pointer-events-none justify-between w-full p-3 transition-all border cursor-pointer delivery-option focus-within:ring-2 ring-cyan-500 ring-offset-2 focus-within:border-cyan-500 rounded-100 border-gray-300 bg-gray-50"
+            >
+                <div class="flex items-center gap-2.5">
+                    <SwitchRoot
+                        v-model="deliveryData.deliveryMethod.peyk"
+                        class="w-[3rem] h-[1.8rem] shrink-0 flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-cyan-500 border border-slate-300 data-[state=checked]:border-cyan-800/20 rounded-full relative transition-all focus-within:outline-none"
+                    >
+                        <SwitchThumb
+                            class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
+                        />
+                    </SwitchRoot>
+                    <span class="w-full text-gray-800 text-sm lg:text-[1rem]"
+                        >ارسال با پیک (فقط ارسال درون شهری شیراز)</span
+                    >
+                </div>
+
+                <span class="text-gray-800 text-sm lg:text-[1rem]">
+                    ۱۵۰٬۰۰۰ تومان
+                </span>
+            </label>
+        </div>
+
+        <div
+            class="flex flex-col items-center w-full gap-4 p-4 border lg:gap-6 border-gray-300 rounded-xl bg-gray-50"
+        >
+            <span
+                class="flex items-center justify-start w-full lg:text-[1.125rem] font-semibold text-gray-900"
+            >
+                خلاصه سفارش
+            </span>
+
+            <div
+                class="grid w-full grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2"
+            >
+                <MinimalCartItem v-for="i in 9" />
+
+                <div class="h-7 flex-center col-span-full lg:hidden">
+                    <button class="gap-2 flex-center">
+                        <span class="text-sm font-bold text-cyan-500">
+                            مشاهده بیشتر
+                        </span>
+                        <Icon
+                            name="bi:chevron-down"
+                            class="**:stroke-cyan-500"
+                        />
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <style scoped></style>