👤 Multi-step Forms

<div class="min-h-screen flex flex-col">
    <slot />
</div>

<script lang="ts">
  import { page } from "$app/stores";
</script>

<nav class="flex justify-center my-6">
  <ul class="steps">
    <a href="/login" class="step step-primary">Sign In</a>
    <a
      href="/login/username"
      class="step"
      class:step-primary={$page.route.id?.match(/username|photo/g)}>
      Choose Username
    </a>
    <a
      href="/login/photo"
      class="step"
      class:step-primary={$page.route.id?.includes("photo")}>
      Upload Photo
    </a>
  </ul>
</nav>

<main class="card w-4/6 bg-neutral text-neutral-content mx-auto">
  <div class="card-body items-center text-center">
    <slot />
  </div>
</main>

<script lang="ts">
   interface Props {
      children?: import('svelte').Snippet;
   }

   let { children }: Props = $props();
</script>

<div class="min-h-screen flex flex-col">
    {@render children?.()}
</div>