System Initiative

<template> <div :style="borderStyle(component)" :class=" clsx( 'flex flex-row items-center rounded-sm border-l-2 p-xs space-x-sm', themeClasses('bg-neutral-200', 'bg-neutral-800'), ) " > <Icon :name="pickBrandIconByString(component.schemaCategory)" size="lg" class="flex-none" /> <div class="flex-1 min-w-0"> <TruncateWithTooltip :lineClamp="3" class="text-sm font-semibold">{{ component.name }}</TruncateWithTooltip> <TruncateWithTooltip class="text-xs">{{ component.schemaName }}</TruncateWithTooltip> </div> <ComponentTileQualificationStatus :component="component" hideTitle /> <StatusIndicatorIcon v-if="component.hasResource" type="resource" size="sm" status="exists" /> <slot name="endItems" /> </div> </template> <script setup lang="ts"> import { Icon, themeClasses, TruncateWithTooltip, } from "@si/vue-lib/design-system"; import clsx from "clsx"; import { BifrostComponent, ComponentInList, } from "@/workers/types/entity_kind_types"; import StatusIndicatorIcon from "@/components/StatusIndicatorIcon.vue"; import { pickBrandIconByString, getAssetColor } from "./util"; import ComponentTileQualificationStatus from "./ComponentTileQualificationStatus.vue"; defineProps<{ component: ComponentInList | BifrostComponent; }>(); const borderStyle = (component: ComponentInList | BifrostComponent) => { const color = getAssetColor(component.schemaCategory); return `border-color: ${color}`; }; </script>