added component for MacroBadge,

used MacroBadge.vue in Day Meal, Meal View and Ingrediens View

frontend/src/components/common/MacroBadge.vue

@@ -0,0 +1,28 @@
+<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}`]">
+		{{ label }} {{ formattedGrams }}g
+	</span>
+</template>