Zakladni vytvareni letu na zaklade planu

src/components/banners/BasicInfoBanner.vue

@@ -1,4 +1,6 @@
 <script setup>
+import {computed} from "vue";
+
 const props = defineProps({
   routeAdd: {
     type: Object,
@@ -8,16 +10,44 @@ const props = defineProps({
     type: String,
     required: false,
     default: "Přidat"
+  },
+  color: {
+    type: String,
+    required: false,
+    default: 'info'
   }
 });
+
+const bannerClass = computed(() => {
+  const defaultClasses = 'bg-light-blue text-white';
+  const classMap = {
+    info: defaultClasses,
+    warning: 'bg-orange text-white',
+    error: 'bg-red text-white',
+  }
+
+  return classMap[props.color] || defaultClasses;
+});
+
+const icon = computed(() => {
+  const iconsMap = {
+    info: "info",
+    warning: "warning",
+    error: "error",
+  }
+
+  return iconsMap[props.color];
+});
+
 </script>
 
 <template>
   <div class="q-pa-md q-gutter-sm">
-    <q-banner class="bg-light-blue text-white">
-      <template v-slot:avatar>
-        <q-icon name="info"/>
+    <q-banner :class=bannerClass>
+      <template v-slot:avatar v-if="icon">
+        <q-icon :name="icon"/>
       </template>
+
       <slot/>
 
       <template v-slot:action v-if="routeAdd">