marzban-dev
58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<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-blue-500 border-blue-500' : '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"
|
|
loading="lazy"
|
|
fetch-priority="low"
|
|
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-blue-500 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>
|