From c2f1846bbbcb018b7cc63306b49f5c6afafe6189 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 27 Mar 2025 23:06:39 +0330
Subject: [PATCH] new changes

---
 frontend/components/cart/checkout/Gateway.vue | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 frontend/components/cart/checkout/Gateway.vue

diff --git a/frontend/components/cart/checkout/Gateway.vue b/frontend/components/cart/checkout/Gateway.vue
new file mode 100644
index 0000000..e38d385
--- /dev/null
+++ b/frontend/components/cart/checkout/Gateway.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    gateway: PaymentGateway;
+    isSelected: boolean;
+};
+
+type Emits = {
+    select: [value: null];
+};
+
+// props
+
+defineProps<Props>();
+
+// emits
+
+const emit = defineEmits<Emits>();
+</script>
+
+<template>
+    <button
+        @click="emit('select', null)"
+        :class="
+            isSelected
+                ? 'ring-2 ring-offset-2 ring-black border-black'
+                : 'border-slate-200'
+        "
+        class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer relative overflow-hidden"
+    >
+        <div class="aspect-square flex-center">
+            <NuxtImg :src="gateway.picture" class="object-cover" />
+        </div>
+        <span class="typo-label-sm text-right text-black">
+            {{ gateway.title }}
+        </span>
+        <Transition
+            enter-active-class="animate__animated animate__fadeInLeft animate__faster"
+            leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
+        >
+            <span
+                v-if="isSelected"
+                class="bg-black rounded-md p-0.5 text-center bottom-4 left-4 text-slate-200 text-[10px] lg:text-xs absolute"
+            >
+                <Icon name="bi:check" size="20" class="**:fill-white" />
+            </span>
+        </Transition>
+    </button>
+</template>
+
+<style scoped></style>