@necrolab/dashboard 0.5.14 → 0.5.16

package/src/components/Tasks/Stats.vue

@@ -2,63 +2,56 @@
     <div class="flex items-center gap-1 font-bold text-white lg:gap-3" v-if="ui.queueStats.show" :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="stat-badge">
+            <h2 class="stat-header">
                 <img width="14px" src="@/assets/img/wildcard.svg" />
                 <span class="hidden md:inline">Total</span>
             </h2>
-            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+            <span class="stat-value">
                 {{ ui.queueStats.total }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="stat-badge">
+            <h2 class="stat-header">
                 <SkiIcon />
                 <span class="hidden md:inline">Queued</span>
             </h2>
-            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+            <span class="stat-value">
                 {{ ui.queueStats.queued }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stats-card flex h-10 min-w-0 items-center justify-between gap-2 rounded-lg px-3 text-sm">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="stat-badge">
+            <h2 class="stat-header">
                 <TimerIcon />
                 <span class="hidden md:inline">Sleeping</span>
             </h2>
-            <span class="flex items-center justify-center whitespace-nowrap text-xs font-black text-light-400">
+            <span class="stat-value">
                 {{ ui.queueStats.sleeping }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="stats-card mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3">
-            <h2 class="flex items-center gap-1 whitespace-nowrap text-sm font-bold">
+            class="mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3 bg-dark-400 border-2 border-dark-550">
+            <h2 class="stat-header">
                 <CartIcon />
                 <span class="hidden sm:block">Next Passes</span>
                 <span class="block sm:hidden">Pass</span>
             </h2>
-            <span class="flex items-center truncate text-right text-xs font-black text-light-400">
+            <span class="flex items-center truncate text-right text-xs font-bold text-light-300">
                 {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
             </span>
         </div>
-        <!-- <div
-            v-if="ui.queueStats.carts"
-            class="bg-dark-500 mb-2 text-sm rounded-lg lg:p-2 p-1 lg:gap-3 gap-2 flex justify-between"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1"><CartIcon />Carts</h2>
-            <span class="text-light-400 text-sm font-black flex justify-center">{{ ui.queueStats.sleeping }} </span>
-        </div> -->
     </div>
 </template>
 
 <script setup>
 import { SkiIcon, TimerIcon, CartIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { ref } from "vue";
+import { ref, onUnmounted } from "vue";
 
 const ui = useUIStore();
 
@@ -71,22 +64,10 @@ const getQueuePassAmount = (width) => {
 let key = ref(0);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
 
-window.addEventListener("resize", () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth)));
-</script>
-<style lang="scss" scoped>
-.stats-card {
-    @apply rounded;
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-
-    h2 {
-        font-weight: 600;
-        color: oklch(0.90 0 0);
-    }
+const handleResize = () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth));
+window.addEventListener("resize", handleResize);
 
-    span {
-        font-weight: 700;
-        color: oklch(0.90 0 0);
-    }
-}
-</style>
+onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+});
+</script>

package/src/components/Tasks/Task.vue

@@ -5,68 +5,65 @@
         @dblclick="handleDoubleClick"
         @touchstart="handleTouchStart"
         @touchend="handleTouchEnd">
-        <div class="col-span-1 flex items-start justify-start lg:col-span-2 py-2">
+        <div class="col-span-1 flex items-center justify-start lg:col-span-2 py-2">
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
             <div
                 v-if="props.preferEventName && props.task.eventName"
-                class="event-details hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer"
+                class="hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer max-w-full min-w-0"
                 @click="copy(props.task.eventId, 'Copied event ID')"
                 :title="`Event ID: ${props.task.eventId}`">
-                <div class="event-name text-white text-[11px] font-semibold leading-tight">
+                <div class="max-w-45 truncate text-xs+ font-semibold leading-tight text-white">
                     {{ props.task.eventName }}
                 </div>
-                <div v-if="props.task.venueName || props.task.eventCity" class="event-venue flex items-start gap-1 text-[9px] leading-tight">
-                    <svg class="event-icon mt-[1px]" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <EventDetailRow :content="[props.task.venueName, props.task.eventCity].filter(Boolean).join(', ')" truncate>
+                    <template #icon>
                         <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                         <circle cx="12" cy="10" r="3"></circle>
-                    </svg>
-                    <span class="truncate text-light-500">{{ [props.task.venueName, props.task.eventCity].filter(Boolean).join(', ') }}</span>
-                </div>
-                <div v-if="props.task.eventLocalDate" class="event-date flex items-start gap-1 text-[9px] leading-tight">
-                    <svg class="event-icon mt-[1px]" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    </template>
+                </EventDetailRow>
+                <EventDetailRow :content="formatEventDate(props.task.eventLocalDate)">
+                    <template #icon>
                         <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                         <line x1="16" y1="2" x2="16" y2="6"></line>
                         <line x1="8" y1="2" x2="8" y2="6"></line>
                         <line x1="3" y1="10" x2="21" y2="10"></line>
-                    </svg>
-                    <span class="text-light-500">{{ formatEventDate(props.task.eventLocalDate) }}</span>
-                </div>
-                <div v-if="props.task.email" class="event-email flex items-start gap-1 text-[9px] leading-tight">
-                    <svg class="event-icon mt-[1px]" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    </template>
+                </EventDetailRow>
+                <div v-if="props.task.email" class="flex items-start gap-1 text-3xs leading-tight-sm min-h-2.75">
+                    <svg class="icon-sm" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
                     </svg>
-                    <span class="truncate text-light-500">{{ props.task.email }}</span>
+                    <span class="truncate text-light-500 text-3xs leading-tight-sm">{{ props.task.email }}</span>
                 </div>
             </div>
             <div
                 v-else
-                class="event-id-details hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer"
-                @click="copy(props.task.eventId, 'Copied event ID')">
-                <div class="event-id-row flex items-center gap-1 text-[11px] text-white font-semibold">
-                    <svg class="event-icon" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
+                class="hidden lg:flex flex-col gap-0.5 justify-center cursor-pointer max-w-full min-w-0"
+                @click="copy(props.task.eventId || props.task.email, props.task.eventId ? 'Copied event ID' : 'Copied email')">
+                <div class="flex items-center gap-1 text-xs+ text-white font-semibold max-w-45 truncate leading-tight-md">
+                    <svg class="icon-sm" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                         <path d="M9 11l3 3L22 4"></path>
                         <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                     </svg>
-                    <span>{{ props.task.eventId }}</span>
+                    <span>{{ props.task.eventId || props.task.email }}</span>
                 </div>
-                <div v-if="props.task.email" class="event-email flex items-start gap-1 text-[9px] leading-tight">
-                    <svg class="event-icon mt-[1px]" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <EventDetailRow v-if="props.task.eventId && props.task.email && props.task.eventId !== props.task.email" :content="props.task.email" truncate>
+                    <template #icon>
                         <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                         <polyline points="22,6 12,13 2,6"></polyline>
-                    </svg>
-                    <span class="truncate text-light-500">{{ props.task.email }}</span>
-                </div>
+                    </template>
+                </EventDetailRow>
             </div>
         </div>
-        <div class="col-span-2 overflow-hidden">
-            <h4 class="text-white text-xs leading-tight">
+        <div class="col-span-2 overflow-hidden lg:col-span-3 xl:col-span-2">
+            <h4 class="text-center text-light-300 text-xs leading-tight lg:text-2xs">
                 <span v-if="!props.task.reservedTicketsList">-</span>
                 <div v-else class="overflow-hidden">
-                    <div v-for="(l, index) in props.task.reservedTicketsList.split('\n')" :key="l" class="truncate">
+                    <div v-for="(l, index) in props.task.reservedTicketsList.split('\n')" :key="`ticket-${index}`" class="truncate">
                         <span
                             v-if="!!l.trim()"
                             class="text-xs"
@@ -84,10 +81,10 @@
                 </span>
             </h4>
         </div>
-        <div class="col-span-5 justify-center text-center md:col-span-4 lg:col-span-5">
-            <div class="status-container">
+        <div class="col-span-6 justify-center text-center md:col-span-5 lg:col-span-4 xl:col-span-5">
+            <div class="task-status-badge">
                 <div
-                    class="status-indicator"
+                    class="w-2 h-2 rounded-full flex-shrink-0"
                     :class="
                         colorToClass(
                             props.task.active || props.task.status.toLowerCase() === 'idle'
@@ -95,43 +92,43 @@
                                 : 'red'
                         )
                     "></div>
-                <span class="status-text">{{ props.task.status }}</span>
+                <span class="truncate text-sm font-medium uppercase text-light-300 tracking-wide max-md:text-xs max-md:max-w-full max-sm:tracking-normal">{{ props.task.status }}</span>
             </div>
         </div>
-        <div class="col-span-2 flex lg:col-span-3 overflow-visible">
-            <ActionButtonGroup class="overflow-visible">
+        <div class="col-span-1 flex md:col-span-2 lg:col-span-3 overflow-visible max-sm:min-w-0 max-sm:flex-shrink-0 max-sm:items-center max-sm:justify-end max-sm:px-0.5">
+            <ActionButtonGroup class="overflow-visible" :allowWrap="true">
                 <li>
-                    <button v-if="task.active" @click="ui.stopTask(task.taskId)">
+                    <button v-if="task.active" @click="ui.stopTask(task.taskId)" aria-label="Stop task">
                         <PauseIcon />
                     </button>
-                    <button v-else @click="ui.startTask(task.taskId)">
+                    <button v-else @click="ui.startTask(task.taskId)" aria-label="Start task">
                         <PlayIcon />
                     </button>
                 </li>
                 <li v-if="task.status?.toLowerCase() == 'waiting' && props.task._timeLeftString !== '00:00'">
-                    <button @click="ui.continueTask(task.taskId, 'autocheckout')">
+                    <button @click="ui.continueTask(task.taskId, 'autocheckout')" aria-label="Auto checkout">
                         <BagWhiteIcon />
                     </button>
                 </li>
                 <li v-if="task.status?.toLowerCase() == 'waiting'">
-                    <button @click="ui.continueTask(task.taskId, 'change_reservation')">
+                    <button @click="ui.continueTask(task.taskId, 'change_reservation')" aria-label="Change reservation">
                         <EditIcon />
                     </button>
                 </li>
                 <li>
-                    <button @click="ui.deleteTask(task.taskId)">
+                    <button @click="ui.deleteTask(task.taskId)" aria-label="Delete task">
                         <TrashIcon />
                     </button>
                 </li>
                 <li @contextmenu.prevent="handleRightClick">
-                    <button @click="openViewTaskModal">
+                    <button @click="openViewTaskModal" aria-label="View task details">
                         <EyeIcon />
                     </button>
                 </li>
             </ActionButtonGroup>
         </div>
-        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center md:block lg:flex">
-            <h4 class="task-id text-center text-xs text-white">
+        <div class="absolute right-5 top-4 col-span-1 hidden items-center justify-center xl:flex max-sm:left-16 max-sm:top-1 max-sm:z-10">
+            <h4 class="text-center text-xs text-light-500 bg-dark-475/40 border border-dark-500 font-semibold tracking-wide m-0 px-1.5 py-0.5 rounded text-2xs lg:text-2xs">
                 {{ props.task.taskId }}
             </h4>
         </div>
@@ -155,202 +152,40 @@
         </transition>
     </Row>
 </template>
-<style lang="scss" scoped>
-h4 {
-    @apply text-center;
-    color: oklch(0.90 0 0);
-}
-
-.event-details,
-.event-id-details {
-    max-width: 100%;
-    min-width: 0;
-    gap: 2px;
-
-    .event-name,
-    .event-id-row {
-        max-width: 180px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 11px;
-        line-height: 1.3;
-    }
-
-    .event-icon {
-        @apply min-w-[10px] flex-shrink-0;
-        min-height: 10px;
-        color: oklch(0.60 0 0);
-        stroke: oklch(0.60 0 0);
-        fill: none;
-
-        path,
-        rect,
-        line,
-        circle,
-        polyline {
-            stroke: oklch(0.60 0 0);
-            fill: none;
-        }
-    }
-
-    .event-venue,
-    .event-date,
-    .event-email {
-        line-height: 1.2;
-        min-height: 11px;
-
-        span {
-            color: oklch(0.60 0 0);
-            font-size: 9px;
-            line-height: 1.2;
-        }
-    }
-}
-
-.status-container {
-    @apply mx-auto flex w-fit items-center justify-center rounded-lg border border-dark-650 bg-dark-500;
-    padding: 6px 12px;
-    gap: 6px;
-    max-width: 100%;
-    pointer-events: none;
-
-    @media (max-width: 768px) {
-        padding: 4px 8px;
-        gap: 4px;
-    }
-}
-
-.status-text {
-    @apply truncate text-sm font-medium uppercase;
-    color: oklch(0.90 0 0);
-    letter-spacing: 0.025em;
-
-    @media (max-width: 768px) {
-        font-size: 0.65rem;
-        max-width: 140px;
-    }
-}
-
-/* Mobile specific styling - changed from 480px to 640px for earlier transition */
-@media (max-width: 640px) {
-    /* Position adjustment for mobile taskId */
-    .block.md\\:hidden {
-        @apply left-16 top-1 z-10;
-    }
-
-    /* Make the actions column more flexible */
-    .col-span-2.lg\\:col-span-3 {
-        min-width: 0;
-        flex-shrink: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 2px;
-    }
-
-    /* Compact status container */
-    .status-container {
-        @apply border-0 shadow-sm;
-        padding: 2px 4px;
-        font-size: 0.7rem;
-        max-width: 100%;
-    }
-
-    .status-text {
-        font-size: 0.65rem;
-        letter-spacing: 0;
-    }
-}
-
-.task-id {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    margin: 0;
-    color: oklch(0.65 0 0);
-    background: rgba(46, 47, 52, 0.4);
-    padding: 2px 6px;
-    border-radius: 4px;
-    border: 1px solid oklch(0.26 0 0);
-}
-
-.task-event-id {
-    font-size: 11px;
-    font-weight: 500;
-    text-align: center;
-    color: oklch(0.82 0 0);
-
-    &:hover {
-        color: #ffffff;
-    }
-
-    @media (max-width: 1024px) {
-        font-size: 10px;
-    }
-
-    @media (max-width: 768px) {
-        font-size: 9px;
-    }
-}
-
-/* Responsive task styling */
-@screen lg {
-    h4 {
-        font-size: 10px;
-    }
-
-    .task-id {
-        font-size: 8px;
-    }
-
-    .task-event-id {
-        font-size: 10px;
-    }
-}
-</style>
 
 <script setup>
 /// <reference path="@/types/index.js" />
 
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon, StadiumIcon, TimerIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
+import EventDetailRow from "@/components/Tasks/EventDetailRow.vue";
 import { useUIStore } from "@/stores/ui";
-import TaskLabel from "@/components/Tasks/TaskLabel.vue";
-import ViewTask from "@/components/Tasks/ViewTask.vue";
-import { computed, ref, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, onUnmounted, nextTick } from "vue";
 import { useRowSelection } from "@/composables/useRowSelection";
 import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
+import { useColorMapping } from "@/composables/useColorMapping";
+import { useDateFormatting } from "@/composables/useDateFormatting";
+import { useTicketPricing } from "@/composables/useTicketPricing";
 
 const ui = useUIStore();
 const { copy } = useCopyToClipboard();
+const { colorToClass } = useColorMapping();
+const { formatEventDate } = useDateFormatting();
+const { isTotalPrice } = useTicketPricing();
 
 /** @type {{ task: Task }} */
 const props = defineProps({
-    task: { type: Object },
-    preferEventName: { type: Boolean, default: false }
-});
-
-// Format event date for display
-const formatEventDate = (dateString) => {
-    if (!dateString) return '';
-    try {
-        const date = new Date(dateString);
-        const options = {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: '2-digit',
-            hour12: true
-        };
-        return date.toLocaleString('en-US', options).replace(',', '');
-    } catch {
-        return dateString;
+    task: {
+        type: Object,
+        required: true
+    },
+    preferEventName: {
+        type: Boolean,
+        default: false
     }
-};
+});
 
 // Context menu positioning
 const contextMenuPosition = ref({});
@@ -361,20 +196,21 @@ const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(
     ui.toggleTaskSelected(props.task.taskId);
 });
 
+// Context menu dimensions
+const MENU_WIDTH = 168; // w-42 = 10.5rem = 168px
+const MENU_HEIGHT = 200; // Approximate height
+
 // Handle right-click to position context menu
 const handleRightClick = (event) => {
-    const menuWidth = 168; // w-42 = 10.5rem = 168px
-    const menuHeight = 200; // Approximate height
-
     let x = event.clientX;
     let y = event.clientY - 55;
 
     // Prevent menu from going off screen
-    if (x + menuWidth > window.innerWidth) {
-        x = event.clientX - menuWidth; // Show to the left instead
+    if (x + MENU_WIDTH > window.innerWidth) {
+        x = event.clientX - MENU_WIDTH; // Show to the left instead
     }
-    if (y + menuHeight > window.innerHeight) {
-        y = event.clientY - menuHeight; // Show above instead
+    if (y + MENU_HEIGHT > window.innerHeight) {
+        y = event.clientY - MENU_HEIGHT; // Show above instead
     }
 
     contextMenuPosition.value = {
@@ -410,32 +246,6 @@ const openViewTaskModal = () => {
     ui.toggleModal('view-task');
 };
 
-const isTotalPrice = (line, index, lines) => {
-    const trimmed = line.trim();
-    if (!trimmed) return false;
-
-    // Check if this is the last non-empty line
-    const nonEmptyLines = lines.filter(l => l.trim());
-    const isLastLine = index === lines.lastIndexOf(nonEmptyLines[nonEmptyLines.length - 1]);
-
-    if (!isLastLine) return false;
-
-    // Check if line is a standalone price (not in parentheses)
-    // Matches: $345.88, €345.88, USD 345.88, EUR 345.88, etc.
-    // Does NOT match: ($86.47) or 2× 301/E ($86.47)
-    const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
-    return totalPricePattern.test(trimmed) && !trimmed.includes('(') && !trimmed.includes(')');
-};
-
-const colorMapping = new Map();
-colorMapping.set("green", "bg-green-400");
-colorMapping.set("red", "bg-red-400");
-colorMapping.set("error", "bg-red-400");
-colorMapping.set("success", "bg-green-400");
-const colorToClass = (color) => {
-    return colorMapping.get(color) || "bg-white";
-};
-
 const openInBrowser = (debug) => {
     if (!props.task.openerLink) return;
     ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
@@ -446,19 +256,6 @@ const openInBrowser = (debug) => {
     openInNewTab(out);
 };
 
-const formatDate = (date) => {
-    if (!date) return "TBA";
-    const d = new Date(date);
-    const iso = d.toISOString();
-    const [year, month, day] = iso.substring(0, 10).split("-");
-    const time = iso.substring(11, 16);
-    const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-    const dayName = dayNames[d.getUTCDay()];
-    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    const monthName = monthNames[parseInt(month) - 1];
-    return `${dayName} ${monthName} ${parseInt(day)} ${year} ${time}`;
-};
-
 const openInNewTab = (href) => {
     if (!href) return;
     ui.logger.Info("Opening", href);

package/src/components/Tasks/TaskLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex rounded-2xl gap-x-2 max-w-full shadow-3xl mx-auto items-center justify-center bg-dark-600">
+    <div class="flex rounded-2xl gap-x-2 max-w-full shadow-3xl mx-auto items-center justify-center bg-dark-550">
         <img class="ml-3 flex-shrink-0" v-if="logo" :src="logo" />
         <div v-else class="ml-3"></div>
         <span class="font-bold p-2 truncate mr-3">{{ text }}</span>
@@ -10,8 +10,14 @@
 import { ref } from "vue";
 
 const props = defineProps({
-    image: { type: String },
-    text: { type: String }
+    image: {
+        type: String,
+        default: ''
+    },
+    text: {
+        type: String,
+        required: true
+    }
 });
 
 const logo = ref(`/img/${props.image}.svg`);