new changes

2025-03-27 23:06:39 +03:30
parent ec137760ff
commit c2f1846bbb
1 changed files with 52 additions and 0 deletions
@@ -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>