team-1/frontend/src/routes/+page.svelte

<script lang="ts">
    import RoomComponent from "$lib/components/RoomComponent.svelte"
    import { parseRoom, type Room } from "$lib/types"
    import { Plus } from "@lucide/svelte"

    let room: Room = { id: "asd", coords: [0.123, 0.456], name: "scatolame party", private: true, range: 124 }
</script>

<div class="flex flex-col items-center gap-2">
    <div class="flex flex-row items-center gap-4 py-4">
        <img src="icon_small.png" class="h-12 w-12" alt="chillbox icon" />
        <span class="lilita-one-regular text-6xl font-bold">ChillBox</span>
    </div>

    <img src="/smerdo_radar_bonus.gif" alt="radar" class="h-64 w-64" />
    <span class="animate-pulse text-sm italic">Scanning for rooms near you...</span>

    <button class="fixed right-4 bottom-4 flex flex-row gap-1 rounded-xl bg-light-pine-blue p-2 text-dark-pine-text sm:right-20 md:right-40 lg:right-80 dark:bg-dark-pine-blue">
        <span> New Room </span>
        <Plus />
    </button>

    <div class="flex flex-col gap-2">
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
        <RoomComponent {room}></RoomComponent>
    </div>
</div>
<!-- <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"> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--             <RoomComponent {room} /> -->
<!--         </div> -->
<!--         <div class="fixed right-0 bottom-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> -->