owlboard-svelte/src/routes/more/settings/+page.svelte

<script>
    import Header from "$lib/navigation/header.svelte";
    import Nav from "$lib/navigation/nav.svelte";
    import QlSet from "$lib/islands/quick-link-set-island.svelte";
    import Island from "$lib/islands/island.svelte";
    import { location } from "$lib/stores/location";
    import { getCurrentLocation } from "$lib/scripts/getLocation";
    import toast from "svelte-french-toast";
    const title = "Settings";

    $: if ($location) {
        getCurrentLocation();
    }

    function locationToast() {
        toast("Settings updated");
    }
</script>

<svelte:head>
    <meta name="robots" content="noindex">
</svelte:head>

<Header {title} />

<QlSet />

<Island variables={{ title: "Location" }}>
    <p>Use your location to quickly check departure boards near you</p>
    <div class="checkbox-container">
        <label for="location_enable">Enabled</label>
        <input id="location_enable" type="checkbox" bind:checked={$location} on:click={locationToast} />
    </div>
</Island>

<Nav />

<style>
    .checkbox-container {
        display: inline-flex;
        align-items: center;
        margin: auto;
    }
    .checkbox-container input[type="checkbox"] {
        margin: 0;
        height: 25px;
        width: 25px;
    }
    .checkbox-container label {
        margin-left: 0;
        margin-right: 25px;
        font-weight: 800;
    }
</style>