From 45327ce01d4c0bb35140d1e027f94d00ce1f86e5 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Mon, 16 Dec 2024 14:34:11 -0500
Subject: [PATCH] fix: type error on element render

---
 web/pages/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/pages/index.vue b/web/pages/index.vue
index 5b45f835a..e8a6f38ee 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -12,6 +12,8 @@ import { serverState } from '~/_data/serverState';
 import type { SendPayloads } from '~/store/callback';
 import AES from 'crypto-js/aes';
 import BrandButton from '~/components/Brand/Button.vue';
+import type { ButtonStyle } from '~/types/ui/button';
+import type { UiBadgePropsColor } from '~/types/ui/badge';
 const { registerEntry } = useCustomElements();
 onBeforeMount(() => {
   registerEntry('UnraidComponents');
@@ -131,14 +133,14 @@ onMounted(() => {
           <hr class="border-black dark:border-white" />
           <h2 class="text-xl font-semibold font-mono">Legacy Badge Components</h2>
             <template v-for="color in ['black', 'white', 'red', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink', 'orange', 'transparent', 'current', 'gray', 'custom']" :key="color">
-              <UiBadge size="14px" :icon="ExclamationTriangleIcon" :color="color">{{ color }}</UiBadge>
+              <UiBadge size="14px" :icon="ExclamationTriangleIcon" :color="color as UiBadgePropsColor">{{ color }}</UiBadge>
             </template>
           </div>
            <div class="bg-background">
           <hr class="border-black dark:border-white" />
           <h2 class="text-xl font-semibold font-mono">Legacy Button Components</h2>
             <template v-for="color in ['black', 'fill', 'gray', 'outline', 'outline-black', 'outline-white', 'underline', 'underline-hover-red', 'white',]" :key="color">
-              <BrandButton type="button" size="14px" :icon="ExclamationTriangleIcon" :btn-style="color">{{ color }}</BrandButton>
+              <BrandButton type="button" size="14px" :icon="ExclamationTriangleIcon" :btn-style="color as ButtonStyle">{{ color }}</BrandButton>
             </template>
           </div>
         </div>