event viewer and zaps

2 files changed, 40 insertions, 0 deletions

diff --git a/src/routes/(app)/e/[id]/+page.server.ts b/src/routes/(app)/e/[id]/+page.server.ts
new file mode 100644
index 00000000..e544d261
--- /dev/null
+++ b/src/routes/(app)/e/[id]/+page.server.ts
@@ -0,0 +1,8 @@
+import { get } from "$lib/utils";
+
+export async function load({ params }) {
+	const event = await get(`/event/${params.id}`);
+	const author = await get(`/users/${event.pubkey}`);
+	const zaps = await get(`/zaps/${params.id}`);
+	return { author, event, zaps };
+}
diff --git a/src/routes/(app)/e/[id]/+page.svelte b/src/routes/(app)/e/[id]/+page.svelte
new file mode 100644
index 00000000..6e8c1b56
--- /dev/null
+++ b/src/routes/(app)/e/[id]/+page.svelte
@@ -0,0 +1,32 @@
+<script>
+  import Avatar from "$comp/Avatar.svelte";
+  let { data } = $props();
+  let { author, event, zaps } = $derived(data);
+
+  let zap = () => {};
+</script>
+
+<div class="container px-4 max-w-xl mx-auto space-y-5 break-words">
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
+    Event
+  </h1>
+  <div class="flex items-center gap-2 text-2xl">
+    <Avatar user={author} size={16} />
+    <div>{event.content}</div>
+  </div>
+  <a href={`/send/zap/${event.pubkey}/${event.id}`} class="btn btn-accent">
+    <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"
+    ></iconify-icon>
+    Zap
+  </a>
+  <div class="flex flex-wrap gap-2">
+    {#each zaps as { amount, user }}
+      <a href={`/${user.pubkey}`}>
+        <div class="flex gap-1 items-center">
+          <Avatar {user} size={8} disabled={true} />
+          <div>{amount}</div>
+        </div>
+      </a>
+    {/each}
+  </div>
+</div>