Extract badge component

This commit is contained in:
Marley 2023-07-13 14:50:52 -07:00
parent 73d9af91ff
commit fab3d28548
3 changed files with 26 additions and 17 deletions

View file

@ -28,5 +28,6 @@
<option name="processLiterals" value="true" />
<option name="processComments" value="true" />
</inspection_tool>
<inspection_tool class="VueMissingComponentImportInspection" enabled="false" level="WARNING" enabled_by_default="false" />
</profile>
</component>

View file

@ -0,0 +1,22 @@
<script setup lang="ts">
defineProps<{state: string}>()
</script>
<template>
<span class="badge" :class="`badge-${state}`"><slot /></span>
</template>
<style lang="postcss">
.badge {
@apply py-1 px-2 rounded-md inline-flex items-center;
@apply ring-1 ring-inset;
&-good {
@apply ring-pink-600 text-pink-600 bg-pink-200/50;
}
&-bad {
@apply ring-sky-600 text-sky-600 bg-sky-200/50;
}
}
</style>

View file

@ -37,10 +37,9 @@ const patrons = [
</TableTd>
<TableTd>
<span class="badge" :class="{
'badge-good': patron.status === 'Active',
'badge-bad': patron.status === 'Overdue',
}">{{ patron.status }}</span>
<Badge :state="patron.status === 'Active' ? 'good' : 'bad'">
{{ patron.status }}
</Badge>
</TableTd>
<TableTd>
@ -72,19 +71,6 @@ section {
@apply w-full px-10;
}
.badge {
@apply py-1 px-2 rounded-md inline-flex items-center;
@apply ring-1 ring-inset;
&-good {
@apply ring-pink-600 text-pink-600 bg-pink-200/50;
}
&-bad {
@apply ring-sky-600 text-sky-600 bg-sky-200/50;
}
}
.secondary-info {
@apply text-black/50;
}