System Initiative

<template> <div v-if="status !== 'operational' && status !== 'unknown'" :class=" clsx( 'flex items-center gap-xs px-xs py-2xs rounded border text-xs', themeClasses( 'bg-warning-100 text-neutral-800 border-warning-400', 'bg-[rgba(217,119,6,0.12)] text-neutral-200 border-warning-600', ), ) " > <Icon name="alert-triangle-filled" size="xs" :class="themeClasses('text-warning-600', 'text-warning-400')" /> System is currently {{ status }} - <a class="hover:underline" href="https://status.systeminit.com" target="_blank" > View status </a> </div> </template> <script lang="ts" setup> import { computed } from "vue"; import clsx from "clsx"; import { Icon, themeClasses } from "@si/vue-lib/design-system"; import { useRealtimeStore } from "@/store/realtime/realtime.store"; const realtimeStore = useRealtimeStore(); const status = computed(() => realtimeStore.applicationStatus); </script>