Add car details and meta pages

src/components/CarDetail.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { trams } from '@/data/trams.ts';
+import { getType } from '@/stores/tram.ts';
+import { computed } from 'vue';
+import { VaChip } from 'vuestic-ui';
+
+const props = defineProps<{ car: ReturnType<typeof getType> }>();
+
+const details = computed(() => (props.car ? trams.find((t) => t.id === props.car!.id) : undefined));
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <p>Lackierung</p>
+    <img v-if="details?.img" class="h-[30px]" :src="`/${details?.img}`" :alt="car?.type" />
+    <span v-else class="h-[30px]"></span>
+    <p>Fahrzeug-Nr.</p>
+    <p>{{ car?.id }}</p>
+    <p>Werbung</p>
+    <div v-if="details">
+      <p v-for="(ad, i) in details.ads" :key="i">
+        {{ ad }}
+        <VaChip v-if="details.types && details.types[i]" size="small" to="/abbreviations">{{
+          details.types[i]
+        }}</VaChip>
+      </p>
+    </div>
+    <p v-else>-</p>
+    <p>Baujahr</p>
+    <p>{{ details?.year ?? '-' }}</p>
+  </div>
+</template>
+
+<style scoped></style>