132 lines
2.9 KiB
Svelte
132 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import Navbar from "$lib/components/Navbar.svelte";
|
|
import crossUrl from "$lib/assets/cross.svg";
|
|
import placeholder from "$lib/assets/study_space.png";
|
|
import Carousel from "$lib/components/Carousel.svelte";
|
|
|
|
const { data } = $props();
|
|
const { space, supabase } = $derived(data);
|
|
|
|
const imgUrls = $derived(
|
|
space.study_space_images.length === 0
|
|
? [placeholder]
|
|
: space.study_space_images.map(
|
|
(img) =>
|
|
supabase.storage.from("files_bucket").getPublicUrl(img.image_path).data
|
|
.publicUrl
|
|
)
|
|
);
|
|
</script>
|
|
|
|
<Navbar>
|
|
<a href="/">
|
|
<img src={crossUrl} alt="close" />
|
|
</a>
|
|
</Navbar>
|
|
|
|
<main>
|
|
<Carousel urls={imgUrls} />
|
|
<div class="nameContainer">
|
|
{space.location}
|
|
</div>
|
|
{#if space.description != null && space.description.length > 0}
|
|
<p class="descContainer">
|
|
{space.description}
|
|
</p>
|
|
<hr />
|
|
{/if}
|
|
<div class="tagContainer">
|
|
{#each space.tags as tag (tag)}
|
|
<span class="tag">
|
|
{tag}
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
<hr />
|
|
<div class="subtitle">Where it is:</div>
|
|
<p class="addrContainer">
|
|
{space.building_location}
|
|
</p>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 0 1rem 0;
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 1/0.8;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
hr {
|
|
height: 2px;
|
|
background-color: #2e3c42;
|
|
width: 70%;
|
|
border: none;
|
|
margin: 0 auto;
|
|
}
|
|
.nameContainer {
|
|
z-index: 10;
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.6rem;
|
|
margin-top: -0.5rem;
|
|
object-position: center;
|
|
background-color: #49bd85;
|
|
border-radius: 8px;
|
|
font-size: 2.8rem;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.descContainer {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1.4rem;
|
|
margin-top: -0.5rem;
|
|
object-position: center;
|
|
border-radius: 8px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
padding: 1.4rem;
|
|
}
|
|
|
|
.addrContainer {
|
|
font-size: 1.2rem;
|
|
padding: 0rem 1.4rem;
|
|
}
|
|
|
|
.tagContainer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
padding: 1.4rem;
|
|
border-radius: 0.5rem;
|
|
background: none;
|
|
}
|
|
|
|
.tag {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 0.25rem;
|
|
background-color: #2e4653;
|
|
color: #eaffeb;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
padding: 0.2rem 0.6rem;
|
|
}
|
|
</style>
|