opnform/resources/js/components/pages/pricing/MonthlyYearlySelector.vue

38 lines
967 B
Vue
Raw Normal View History

<template>
<div class="border border-gray-300 rounded-xl flex p-1 relative">
<button class="font-semibold block flex-grow cursor-pointer">
2023-10-24 09:00:54 +00:00
<div
class="p-2 px-3 rounded-lg transition-colors"
:class="{'bg-blue-500 text-white': !modelValue}"
@click="set(false)"
>
Monthly
</div>
</button>
<button class="font-semibold block flex-grow cursor-pointer" @click="set(true)">
2023-10-24 09:00:54 +00:00
<div
class="p-2 px-4 rounded-lg transition-colors"
:class="{'bg-blue-500 text-white': modelValue}"
>
Yearly
</div>
</button>
<div class="absolute hidden sm:block text-gray-500 text-xs mt-12">
Save 20% with annual plans
</div>
</div>
</template>
2023-10-24 09:00:54 +00:00
<script setup>
import { defineEmits, defineProps } from 'vue'
2023-10-24 09:00:54 +00:00
defineProps({
modelValue: { type: Boolean, required: true }
})
const emit = defineEmits()
2023-10-24 09:00:54 +00:00
const set = (value) => {
emit('update:modelValue', value)
}
</script>