Page Stubs and Click-Through Flow

resources/js/Components/ScoreIndicator.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  score: {
+    type: Number,
+    default: 0,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const scoreData = computed(() => {
+  if (props.score >= 10) {
+    return {
+      color: 'green',
+      bgClass: 'bg-green-500',
+      textClass: 'text-green-500',
+      label: 'GO',
+    }
+  } else if (props.score >= 5) {
+    return {
+      color: 'amber',
+      bgClass: 'bg-amber-500',
+      textClass: 'text-amber-500',
+      label: 'Consult Leadership',
+    }
+  } else if (props.score >= 1) {
+    return {
+      color: 'red',
+      bgClass: 'bg-red-500',
+      textClass: 'text-red-500',
+      label: 'NO GO',
+    }
+  } else {
+    return {
+      color: 'gray',
+      bgClass: 'bg-gray-500',
+      textClass: 'text-gray-400',
+      label: 'No Score',
+    }
+  }
+})
+</script>
+
+<template>
+  <div v-if="visible" class="inline-flex items-center gap-3">
+    <div class="flex items-baseline gap-2">
+      <span class="text-4xl font-bold" :class="scoreData.textClass">
+        {{ score }}
+      </span>
+      <span class="text-sm text-gray-400">points</span>
+    </div>
+    <div
+      :class="[
+        scoreData.bgClass,
+        'px-4 py-2 rounded-lg text-white font-semibold text-sm',
+      ]"
+    >
+      {{ scoreData.label }}
+    </div>
+  </div>
+</template>