feat: initial uploads and single study space view

Co-Authored-By: Alex Ling <al443@ic.ac.uk>

src/lib/components/Button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        onclick?: (event: MouseEvent) => void;
+        disabled?: boolean;
+        type?: "button" | "submit" | "reset";
+        children?: Snippet;
+    }
+    const { children, ...rest }: Props = $props();
+</script>
+
+<button {...rest}>
+    {@render children?.()}
+</button>
+
+<style>
+    button {
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+        background: linear-gradient(-83deg, #3fb095, #49bd85);
+        box-shadow: 0rem 0rem 0.5rem #182125;
+        color: #eaffeb;
+        border: none;
+        cursor: pointer;
+    }
+    button:focus {
+        outline: 2px solid #007bff;
+    }
+</style>

src/lib/components/Navbar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import logoUrl from "$lib/assets/logo.svg";
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children?: Snippet;
+    }
+
+    const { children }: Props = $props();
+</script>
+
+<nav>
+    <a href="/" class="logo">
+        <img src={logoUrl} alt="logo" />
+    </a>
+    <div class="rightButton">{@render children?.()}</div>
+</nav>
+
+<style>
+    nav {
+        display: flex;
+        position: sticky;
+        width: 100%;
+        height: 4rem;
+        top: 0;
+        left: 0;
+        background: linear-gradient(-77deg, #2e4653, #3a5b56);
+        box-shadow: 0rem 0rem 0.5rem #182125;
+        align-items: center;
+    }
+
+    .logo {
+        display: block;
+        height: 100%;
+    }
+    .logo img {
+        height: 100%;
+    }
+
+    .rightButton {
+        display: flex;
+        flex-direction: row-reverse;
+        flex: 1;
+    }
+</style>

src/lib/components/SpaceCard.svelte

@@ -5,17 +5,18 @@
         alt: string;
         imgSrc: string;
         description?: Snippet;
+        href?: string;
     }
 
-    const { alt, imgSrc, description }: Props = $props();
+    const { alt, imgSrc, description, href }: Props = $props();
 </script>
 
-<div class="card">
+<a class="card" {href}>
     <img src={imgSrc} {alt} />
     <div class="description">
         {@render description?.()}
     </div>
-</div>
+</a>
 
 <style>
     .card {

src/lib/components/inputs/Image.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import cameraUrl from "$lib/assets/camera.svg";
+
+    interface Props {
+        name: string;
+        height?: string;
+        minHeight?: string;
+        files?: FileList;
+        required?: boolean;
+    }
+
+    let { name, height, minHeight, files = $bindable(), ...rest }: Props = $props();
+</script>
+
+<label
+    for={name}
+    style="height: {height || 'auto'}; min-height: {minHeight || 'auto'};"
+    class:no-bg={files && files.length > 0}
+>
+    {#if files && files.length > 0}
+        <img src={URL.createObjectURL(files[0])} alt="uploaded study space" class="preview" />
+    {:else}
+        <div class="message">
+            <img src={cameraUrl} class="icon" alt="camera icon" />
+            <span>Click to upload a photo</span>
+        </div>
+    {/if}
+    <input type="file" id={name} {name} accept=".png, .jpg, .jpeg, .svg" {...rest} bind:files />
+</label>
+
+<style>
+    label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        background-color: #eaffeb;
+        cursor: pointer;
+    }
+    label.no-bg {
+        background-color: transparent;
+        padding: 0;
+    }
+
+    label input {
+        display: none;
+    }
+
+    .message {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #49bd85;
+    }
+    .preview {
+        max-height: 100%;
+        max-width: 100%;
+    }
+    .message .icon {
+        width: 2rem;
+    }
+</style>

src/lib/components/inputs/Text.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    interface Props {
+        name: string;
+        value?: string | null;
+        placeholder?: string;
+        required?: boolean;
+    }
+
+    let { value = $bindable(), name, ...rest }: Props = $props();
+</script>
+
+<input type="text" id={name} {name} bind:value {...rest} />
+
+<style>
+    input {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+    }
+
+    input:focus {
+        border-color: #007bff;
+        outline: none;
+    }
+</style>

src/lib/components/inputs/Textarea.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    interface Props {
+        name: string;
+        value?: string | null;
+        placeholder?: string;
+        required?: boolean;
+        rows?: number;
+        cols?: number;
+    }
+
+    let { value = $bindable(), name, ...rest }: Props = $props();
+</script>
+
+<textarea id={name} {name} {...rest}></textarea>
+
+<style>
+    textarea {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        resize: vertical;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+    }
+
+    textarea:focus {
+        border-color: #007bff;
+        outline: none;
+    }
+</style>