fixed merge issue with main

frontend/src/components/RoomFinder.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+
+import {Ref, ref} from "vue";
+import {fetchRoom} from "../api/fetchRoom.ts";
+import RoomOccupation from "./RoomOccupation.vue";
+
+const rooms = async () => {
+  return await fetchRoom();
+};
+
+const roomsList: Ref<{ name: string }[]> = ref([]);
+const selectedRoom: Ref<{ name: string }> = ref({name: ""});
+
+rooms().then(
+    (data) =>
+        (roomsList.value = data.map((room) => {
+          return {name: room};
+        })),
+);
+</script>
+
+<template>
+  <div class="flex flex-column">
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <h3 class="text-4xl">Raumfinder</h3>
+    </div>
+    <div
+        class="flex align-items-center justify-content-center h-4rem border-round m-2"
+    >
+      <h5 class="text-2xl">Please select a room</h5>
+    </div>
+    <div
+        class="flex align-items-center justify-content-center border-round m-2"
+    >
+      <Dropdown
+          v-model="selectedRoom"
+          :options="roomsList"
+          class="w-full md:w-25rem mx-2"
+          filter
+          option-label="name"
+          placeholder="Select a Room"
+      />
+    </div>
+    <div
+        class="m-6"
+    >
+    <RoomOccupation :room="selectedRoom.name"/>
+    </div>
+  </div>
+</template>