chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Domain/Recipe/RecipeTimeCard.vue

@@ -0,0 +1,134 @@
+<template v-if="_showCards">
+  <div class="text-center">
+    <!-- Total Time -->
+    <div
+      v-if="validateTotalTime"
+      class="time-card-flex mx-auto"
+    >
+      <v-row
+        no-gutters
+        class="d-flex flex-no-wrap align-center"
+        :style="fontSize"
+      >
+        <v-icon
+          :x-large="!small"
+          start
+          color="primary"
+        >
+          {{ $globals.icons.clockOutline }}
+        </v-icon>
+        <p class="my-0">
+          <span class="font-weight-bold opacity-80">{{ validateTotalTime.name }}</span><br>{{ validateTotalTime.value }}
+        </p>
+      </v-row>
+    </div>
+    <v-divider
+      v-if="validateTotalTime && (validatePrepTime || validatePerformTime)"
+      class="my-2"
+    />
+    <!-- Prep Time & Perform Time -->
+    <div
+      v-if="validatePrepTime || validatePerformTime"
+      class="time-card-flex mx-auto"
+    >
+      <v-row
+        no-gutters
+        class="d-flex justify-center align-center"
+        :class="{ 'flex-column': $vuetify.display.smAndDown }"
+        style="width: 100%;"
+        :style="fontSize"
+      >
+        <div
+          v-if="validatePrepTime"
+          class="d-flex flex-no-wrap my-1 align-center"
+        >
+          <v-icon
+            :size="small ? 'small' : 'large'"
+            left
+            color="primary"
+          >
+            {{ $globals.icons.knife }}
+          </v-icon>
+          <p class="my-0">
+            <span class="font-weight-bold opacity-80">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}
+          </p>
+        </div>
+        <v-divider
+          v-if="validatePrepTime && validatePerformTime"
+          vertical
+          class="mx-4"
+        />
+        <div
+          v-if="validatePerformTime"
+          class="d-flex flex-no-wrap my-1 align-center"
+        >
+          <v-icon
+            :size="small ? 'small' : 'large'"
+            left
+            color="primary"
+          >
+            {{ $globals.icons.potSteam }}
+          </v-icon>
+          <p class="my-0">
+            <span class="font-weight-bold opacity-80">{{ validatePerformTime.name }}</span><br>{{ validatePerformTime.value }}
+          </p>
+        </div>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  prepTime?: string | null;
+  totalTime?: string | null;
+  performTime?: string | null;
+  color?: string;
+  small?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  prepTime: null,
+  totalTime: null,
+  performTime: null,
+  color: "accent custom-transparent",
+  small: false,
+});
+
+const i18n = useI18n();
+
+function isEmpty(str: string | null) {
+  return !str || str.length === 0;
+}
+
+const _showCards = computed(() => {
+  return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x));
+});
+
+const validateTotalTime = computed(() => {
+  return !isEmpty(props.totalTime) ? { name: i18n.t("recipe.total-time"), value: props.totalTime } : null;
+});
+
+const validatePrepTime = computed(() => {
+  return !isEmpty(props.prepTime) ? { name: i18n.t("recipe.prep-time"), value: props.prepTime } : null;
+});
+
+const validatePerformTime = computed(() => {
+  return !isEmpty(props.performTime) ? { name: i18n.t("recipe.perform-time"), value: props.performTime } : null;
+});
+
+const fontSize = computed(() => {
+  return props.small ? { fontSize: "smaller" } : { fontSize: "larger" };
+});
+</script>
+
+<style scoped>
+.text-center {
+  font-size: smaller;
+}
+.time-card-flex {
+  width: fit-content;
+}
+.custom-transparent {
+  opacity: 0.7;
+}
+</style>