Extract error into component

showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, useTemplateRef } from "vue";
+import CSegmentError from "./CSegmentError.vue";
 
 const form = useTemplateRef<HTMLFormElement>("form");
 const disabled = ref(false);
@@ -55,7 +56,7 @@ async function submit(): Promise<void> {
     </label>
     <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
     <button :disabled>Print</button>
-    <p v-if="error" class="error">{{ error }}</p>
+    <CSegmentError :message="error" />
   </form>
 </template>
 
@@ -76,10 +77,4 @@ fieldset {
   flex-direction: column;
   border: none;
 }
-
-.error {
-  background-color: #fdd;
-  color: #400;
-  padding: 0 2px;
-}
 </style>

showbits-thermal-printer-ui/src/components/CSegmentError.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { message } = defineProps<{ message?: string }>();
+</script>
+
+<template>
+  <p v-if="message">{{ message }}</p>
+</template>
+
+<style scoped>
+p {
+  background-color: #fdd;
+  color: #400;
+  padding: 0 2px;
+}
+</style>

showbits-thermal-printer-ui/src/components/CSegmentText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, type StyleValue, useTemplateRef } from "vue";
+import CSegmentError from "./CSegmentError.vue";
 
 const form = useTemplateRef<HTMLFormElement>("form");
 const disabled = ref(false);
@@ -73,7 +74,7 @@ async function submit(): Promise<void> {
       <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
     </fieldset>
     <button :disabled>Print</button>
-    <p v-if="error" class="error">{{ error }}</p>
+    <CSegmentError :message="error" />
   </form>
 </template>
 
@@ -98,10 +99,4 @@ fieldset {
   flex-direction: column;
   border: none;
 }
-
-.error {
-  background-color: #fdd;
-  color: #400;
-  padding: 0 2px;
-}
 </style>