Mamalizz
53 lines
1.3 KiB
Vue
53 lines
1.3 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-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>
|