recipe time card

frontend/components/Domain/Recipe/RecipeTimeCard.vue

@@ -1,4 +1,4 @@
-<template v-if="showCards">
+<template v-if="_showCards">
   <div class="text-center">
     <!-- Total Time -->
     <div
@@ -78,38 +78,29 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineNuxtComponent({
-  props: {
-    prepTime: {
-      type: String,
-      default: null,
-    },
-    totalTime: {
-      type: String,
-      default: null,
-    },
-    performTime: {
-      type: String,
-      default: null,
-    },
-    color: {
-      type: String,
-      default: "accent custom-transparent",
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
+<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(() => {
+const _showCards = computed(() => {
   return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x));
 });
 
@@ -128,16 +119,6 @@ export default defineNuxtComponent({
 const fontSize = computed(() => {
   return props.small ? { fontSize: "smaller" } : { fontSize: "larger" };
 });
-
-    return {
-      showCards,
-      validateTotalTime,
-      validatePrepTime,
-      validatePerformTime,
-      fontSize,
-    };
-  },
-});
 </script>
 
 <style scoped>