You've already forked AstralRinth
forked from xxxOFFxxx/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { RadioButtonCheckedIcon, RadioButtonIcon, SpinnerIcon } from '@modrinth/assets'
|
|
import type Stripe from 'stripe'
|
|
|
|
import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select'): void
|
|
}>()
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
item: Stripe.PaymentMethod | undefined
|
|
selected: boolean
|
|
loading?: boolean
|
|
}>(),
|
|
{
|
|
loading: false,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="flex items-center w-full gap-2 border-none p-3 text-primary rounded-xl transition-all duration-200 hover:bg-button-bg hover:brightness-[--hover-brightness] active:scale-[0.98] hover:cursor-pointer"
|
|
:class="selected ? 'bg-button-bg' : 'bg-transparent'"
|
|
@click="emit('select')"
|
|
>
|
|
<RadioButtonCheckedIcon v-if="selected" class="size-6 text-brand" />
|
|
<RadioButtonIcon v-else class="size-6 text-secondary" />
|
|
|
|
<template v-if="item === undefined">
|
|
<span>New payment method</span>
|
|
</template>
|
|
<FormattedPaymentMethod v-else-if="item" :method="item" />
|
|
<SpinnerIcon v-if="loading" class="ml-auto size-4 text-secondary animate-spin" />
|
|
</button>
|
|
</template>
|