mirror of
https://github.com/unraid/api.git
synced 2026-01-06 00:30:22 -06:00
42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ShieldExclamationIcon } from '@heroicons/vue/24/solid';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
import { useThemeStore } from '~/store/theme';
|
|
import { RegistrationItemProps } from '~/types/registration';
|
|
|
|
withDefaults(defineProps<RegistrationItemProps>(), {
|
|
error: false,
|
|
text: '',
|
|
});
|
|
|
|
const { darkMode } = storeToRefs(useThemeStore());
|
|
|
|
const evenBgColor = computed(() => {
|
|
return darkMode.value ? 'even:bg-grey-darkest' : 'even:bg-black/5';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
!error && evenBgColor,
|
|
error && 'text-white bg-unraid-red',
|
|
]"
|
|
class="text-16px p-16px grid grid-cols-1 gap-4px sm:px-20px sm:grid-cols-3 sm:gap-16px items-start rounded"
|
|
>
|
|
<dt class="font-semibold flex flex-row justify-start items-center gap-x-8px">
|
|
<ShieldExclamationIcon v-if="error" class="w-16px h-16px fill-current" />
|
|
<span>{{ label }}</span>
|
|
</dt>
|
|
<dd class="leading-normal sm:col-span-2">
|
|
<span v-if="text" class="select-all" :class="!error ? 'opacity-75' : ''">
|
|
{{ text }}
|
|
</span>
|
|
<template v-if="$slots['right']">
|
|
<slot name="right"></slot>
|
|
</template>
|
|
</dd>
|
|
</div>
|
|
</template>
|