style updates

This commit is contained in:
Hayden 2022-09-03 01:17:57 -08:00
parent f4f7123073
commit 6bbe62823d
19 changed files with 337 additions and 107 deletions

View file

@ -1,10 +1,16 @@
<script setup lang="ts">
export type sizes = 'sm' | 'md' | 'lg';
import { Label } from '~~/lib/api/classes/labels';
defineProps({
label: {
type: Object as () => Label,
required: true,
},
size: {
type: String as () => sizes,
default: 'md',
},
});
const badge = ref(null);
@ -15,13 +21,19 @@
</script>
<template>
<NuxtLink ref="badge" :to="`/label/${label.id}`">
<span class="badge badge-lg p-4">
<label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
<Icon name="heroicons-arrow-right" class="mr-2 swap-on"></Icon>
<Icon name="heroicons-tag" class="mr-2 swap-off"></Icon>
</label>
{{ label.name }}
</span>
<NuxtLink
class="badge"
:class="{
'p-3': size !== 'sm',
'p-2 badge-sm': size === 'sm',
}"
ref="badge"
:to="`/label/${label.id}`"
>
<label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
<Icon name="heroicons-arrow-right" class="mr-2 swap-on"></Icon>
<Icon name="heroicons-tag" class="mr-2 swap-off"></Icon>
</label>
{{ label.name }}
</NuxtLink>
</template>