30 lines
604 B
Vue
30 lines
604 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
export type MacroType = 'protein' | 'carbs' | 'fat' | 'fiber'
|
|
|
|
const props = defineProps<{
|
|
macro: MacroType
|
|
label: string
|
|
grams: number
|
|
}>()
|
|
|
|
const formattedGrams = computed(() => {
|
|
if (!Number.isFinite(props.grams)) {
|
|
return '0'
|
|
}
|
|
|
|
return props.grams.toLocaleString(undefined, {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 2,
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<span :class="['macro-badge', `macro-badge--${macro}`]">
|
|
<span>{{ label }}</span>
|
|
<strong class="macro-badge__value">{{ formattedGrams }}g</strong>
|
|
</span>
|
|
</template>
|