base ui

ui/src/components/EssentialLink.vue

@@ -0,0 +1,48 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="props.link"
+  >
+    <q-item-section
+      v-if="props.icon"
+      avatar
+    >
+      <q-icon :name="props.icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ props.title }}</q-item-label>
+      <q-item-label caption>{{ props.caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'EssentialLink'
+})
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+
+  caption: {
+    type: String,
+    default: ''
+  },
+
+  link: {
+    type: String,
+    default: '#'
+  },
+
+  icon: {
+    type: String,
+    default: ''
+  }
+})
+</script>