zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: move nav footer items to settings

Browse source
This commit is contained in:
Anthony Fu 2022-12-28 00:03:50 +01:00
parent 378ba25997
commit 12942095de
15 changed files with 101 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

42
components/settings/SettingsToggleItem.vue Normal file
View file

@ -0,0 +1,42 @@
<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>