app/components/Ui/SystemBar.vue

<!--
System bars
-->

<template>
  <div
    :class="'alert-bar ' + (onClick ? 'clickable' : '')"
    @click="onClick !== undefined ? onClick() : null"
  >
    <slot>
      <v-icon v-if="icon" small :icon="icon" />
      {{ text }}
    </slot>
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'

const props = defineProps({
  text: {
    type: String,
    required: false,
    default: '',
  },
  icon: {
    type: String,
    required: false,
    default: undefined,
  },
  onClick: {
    type: Function,
    required: false,
    default: undefined,
  },
})
</script>

<style scoped lang="scss">
.alert-bar {
  position: relative;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}

.clickable {
  cursor: pointer;
}

.clickable:hover {
  text-decoration: underline;
}
</style>