Add special cars

src/components/SpecialCar.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SpecialCar } from '@/data/specials.ts';
+import { useTramStore } from '@/stores/tram.ts';
+import { VaCheckbox } from 'vuestic-ui';
+
+defineProps<{
+  car: SpecialCar;
+}>();
+
+const tramStore = useTramStore();
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-2 justify-between rounded-2xl px-4 py-2 text-center transition-colors sm:grid-cols-4"
+    :class="
+      tramStore.specials.bsag.includes(car[0])
+        ? 'bg-green-100 hover:bg-green-200'
+        : 'bg-gray-100 hover:bg-gray-200'
+    "
+  >
+    <p class="text-left">{{ car.length > 3 ? car[3] : car[0] }}</p>
+    <p>{{ car[1] }}</p>
+    <p>{{ car[2] }}</p>
+    <VaCheckbox class="ms-auto mr-2" :array-value="car[0]" v-model="tramStore.specials.bsag" />
+  </div>
+</template>
+
+<style scoped></style>