feat: componentes reutilizáveis StatusChip, StatCard, PipelineBar

2026-03-14 10:41:24 -03:00
parent 91de5a1996
commit b18f7f1ffc
3 changed files with 101 additions and 0 deletions
--- a/front-end/app/components/StatCard.vue
+++ b/front-end/app/components/StatCard.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  value: string | number
+  sub?: string
+  color?: string
+}>()
+</script>
+
+<template>
+  <div class="stat-card">
+    <p class="stat-label">{{ label }}</p>
+    <p class="stat-value" :style="color ? { color } : {}">{{ value }}</p>
+    <p v-if="sub" class="stat-sub">{{ sub }}</p>
+  </div>
+</template>
+
+<style scoped>
+.stat-card { background: white; border-radius: 11px; padding: 16px; border: 1px solid #e2e8f0; }
+.stat-label { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; }
+.stat-value { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -1px; line-height: 1; }
+.stat-sub { font-size: 10.5px; color: #64748b; margin-top: 5px; }
+</style>