<script lang="ts">
    import RoomList from "$lib/components/RoomList.svelte"
</script>

<div class="h-full w-full flex-row justify-center p-4">
    <div class="relative min-h-screen justify-center justify-items-center">
        <h1>Scan your nearby rooms</h1>
        <img src="/smerdoradar.gif" alt="radar" class="h-64 w-64" />
        <div class="max-h-50 w-full overflow-y-auto">
            <RoomList />
            <RoomList />
            <RoomList />
            <RoomList />
            <RoomList />
            <RoomList />
            <RoomList />
            <RoomList />
            <RoomList />
        </div>
        <div class="fixed bottom-0 right-0">
            <button class="mt-4 justify-end rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600 active:bg-blue-700"> + </button>
        </div>
    </div>
</div>
