Work on layout, modals, toast:

2024-08-05 14:45:16 -07:00
parent b2fc469b41
commit a89d20b0e1
33 changed files with 2269 additions and 84 deletions
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import "src/app.css"
+  import {onMount} from 'svelte'
+  import {page} from '$app/stores'
+  import {onNavigate} from '$app/navigation'
+  import Icon from 'lib/components/Icon.svelte'
+  import PrimaryNav from 'app/components/PrimaryNav.svelte'
+  import SecondaryNav from 'app/components/SecondaryNav.svelte'
+  import {fly, toast, modals, pushModal} from 'app/state'
+
+  const login = async () => {
+    const nl = await import('nostr-login')
+
+    nl.init({
+      noBanner: true,
+      title: 'Welcome to Flotilla!',
+      description: 'Log in with your Nostr account or sign up to join.',
+      methods: "connect,extension,local",
+      onAuth(npub: string) {
+        console.log(npub)
+      }
+    })
+
+    nl.launch()
+  }
+
+  let modal
+
+  $: {
+    if ($page.state.modal) {
+      modal?.showModal()
+    } else {
+      modal?.close()
+    }
+  }
+</script>
+
+<div class="flex h-screen" data-theme="dark">
+  <PrimaryNav />
+  <SecondaryNav />
+  <div class="bg-base-200 flex-grow">
+    <slot />
+  </div>
+</div>
+
+<dialog bind:this={modal} class="modal modal-bottom sm:modal-middle">
+  <div class="modal-box">
+    {#if $page.state.modal}
+      {@const {component, props} = modals.get($page.state.modal)}
+      <svelte:component this={component} {...props} />
+    {/if}
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button />
+  </form>
+</dialog>
+
+{#if $toast}
+  <div transition:fly class="toast">
+    <div class="alert">
+      <span>{$toast.message}</span>
+    </div>
+  </div>
+{/if}
@@ -1,2 +1,46 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+  import Icon from 'lib/components/Icon.svelte'
+</script>
+
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content">
+    <div class="max-w-xl flex flex-col gap-4">
+      <h1 class="text-5xl text-center text-stark-content">Welcome to</h1>
+      <h1 class="text-5xl font-bold uppercase text-center mb-4 text-stark-content">Flotilla</h1>
+      <div class="grid gap-3 grid-cols-2">
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="add-circle" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Create a group</p>
+            <p class="text-xs">Invite all your friends, do life together.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="compass" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Discover groups</p>
+            <p class="text-xs">Find a community based on your hobbies or interests.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="plain" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Leave feedback</p>
+            <p class="text-xs">Let us know how we can improve by giving us feedback.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+        <div class="button items-center flex gap-4 bg-base-100 hover:bg-base-200">
+          <Icon class="bg-accent" size={7} icon="hand-pills" />
+          <div class="flex flex-col gap-1">
+            <p class="text-stark-content">Donate to Flotilla</p>
+            <p class="text-xs">Support the project by donating to the developer.<p>
+          </div>
+          <Icon size={7} icon="alt-arrow-right" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1 @@
+