43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
icon?: string
|
||
|
|
text?: string
|
||
|
|
checked: boolean
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<button
|
||
|
|
exact-active-class="text-primary"
|
||
|
|
block w-full group focus:outline-none
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
w-full flex w-fit px5 py3 md:gap2 gap4 items-center
|
||
|
|
transition-250 group-hover:bg-active
|
||
|
|
group-focus-visible:ring="2 current"
|
||
|
|
>
|
||
|
|
<div flex-1 flex items-center md:gap2 gap4>
|
||
|
|
<div
|
||
|
|
flex items-center justify-center flex-shrink-0
|
||
|
|
:class="$slots.description ? 'w-12 h-12' : ''"
|
||
|
|
>
|
||
|
|
<slot name="icon">
|
||
|
|
<div v-if="icon" :class="icon" md:text-size-inherit text-xl />
|
||
|
|
</slot>
|
||
|
|
</div>
|
||
|
|
<div space-y-1>
|
||
|
|
<p :class="checked ? 'text-base' : 'text-secondary'">
|
||
|
|
<slot>
|
||
|
|
<span>{{ text }}</span>
|
||
|
|
</slot>
|
||
|
|
</p>
|
||
|
|
<p v-if="$slots.description" text-sm text-secondary>
|
||
|
|
<slot name="description" />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div text-lg :class="checked ? 'i-ri-checkbox-line text-primary' : 'i-ri-checkbox-blank-line text-secondary'" />
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</template>
|