added checkout page

frontend/pages/cart/checkout.vue

@@ -1,14 +1,116 @@
 <script setup lang="ts">
+// meta
+
 definePageMeta({
     layout: "cart",
     pageTitle: "ثبت سفارش",
     prevPage: { name: "cart-delivery", label: "انتخاب آدرس" },
     nextPage: { name: "checkout", label: "پرداخت" },
 });
+
+// types
+
+type PaymentGateway = {
+    id: number;
+    picture: string;
+    title: string;
+};
+
+// state
+
+const paymentGateways = ref<PaymentGateway[]>([
+    {
+        id: 1,
+        picture: "/zarinpal.png",
+        title: "زرین پال",
+    },
+    {
+        id: 2,
+        picture: "/saman-bank.png",
+        title: "بانک سامان",
+    },
+    {
+        id: 3,
+        picture: "/mellat-bank.png",
+        title: "بانک ملت",
+    },
+    {
+        id: 4,
+        picture: "/jibimo.png",
+        title: "جیبی مو",
+    },
+    {
+        id: 5,
+        picture: "/idpay.png",
+        title: "آی دی پی",
+    },
+]);
+
+const selectedGateway = ref<PaymentGateway>(paymentGateways.value[0]);
 </script>
 
 <template>
-    <div></div>
+    <div class="flex flex-col w-full gap-5">
+        <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 text-[1.125rem] font-semibold text-gray-900"
+            >
+                روش پرداخت
+            </span>
+
+            <div
+                class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"
+            >
+                <div
+                    v-for="(gateway, index) in paymentGateways"
+                    @click="selectedGateway = { ...gateway }"
+                    :key="index"
+                    :class="
+                        selectedGateway.id == gateway.id
+                            ? 'ring-2 ring-offset-2 ring-cyan-500 border-cyan-500'
+                            : 'border-slate-200'
+                    "
+                    class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer"
+                >
+                    <div class="aspect-square flex-center">
+                        <img :src="gateway.picture" class="object-cover" />
+                    </div>
+                    <span class="typo-label-sm text-black">
+                        {{ gateway.title }}
+                    </span>
+                </div>
+            </div>
+        </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>