Move chip for event status to own component

aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue

@@ -14,16 +14,9 @@
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <slot name="badge" :selected-event="selectedEvent">
-          <v-chip
+          <cancelled-calendar-status-chip
             v-if="selectedEvent.status === 'CANCELLED' && !withoutBadge"
-            color="error"
-            label
-          >
-            <v-avatar left>
-              <v-icon>mdi-cancel</v-icon>
-            </v-avatar>
-            {{ $t("calendar.cancelled") }}
-          </v-chip>
+          />
         </slot>
       </v-toolbar>
       <slot name="time" :selected-event="selectedEvent">
@@ -64,9 +57,11 @@
 
 <script>
 import calendarFeedDetailsMixin from "../../mixins/calendarFeedDetails.js";
+import CancelledCalendarStatusChip from "./CancelledCalendarStatusChip.vue";
 
 export default {
   name: "BaseCalendarFeedDetails",
+  components: { CancelledCalendarStatusChip },
   mixins: [calendarFeedDetailsMixin],
 };
 </script>

aleksis/core/frontend/components/calendar/CalendarStatusChip.vue

+<script>
+export default {
+  name: "CalendarStatusChip",
+  props: {
+    color: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <v-chip :color="color" label>
+    <v-avatar left>
+      <v-icon>{{ icon }}</v-icon>
+    </v-avatar>
+    <slot></slot>
+  </v-chip>
+</template>

aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue

+<script>
+import CalendarStatusChip from "./CalendarStatusChip.vue";
+
+export default {
+  name: "CancelledCalendarStatusChip",
+  components: { CalendarStatusChip },
+};
+</script>
+
+<template>
+  <calendar-status-chip icon="mdi-cancel" color="error">
+    {{ $t("calendar.cancelled") }}
+  </calendar-status-chip>
+</template>