From 6808012fa46a1e783781e81ebb98bcf6bcddd012 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 27 Nov 2023 13:46:09 +0000
Subject: [PATCH] feat: list files/tags

---
 src/page/torrent.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/page/torrent.tsx b/src/page/torrent.tsx
index c93c257..0aee9c7 100644
--- a/src/page/torrent.tsx
+++ b/src/page/torrent.tsx
@@ -26,6 +26,8 @@ export function TorrentPage() {
 export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
   const name = item.tags.find((a) => a[0] === "title")?.at(1);
   const size = Number(item.tags.find((a) => a[0] === "size")?.at(1));
+  const files = item.tags.filter(a => a[0] === "file");
+  const tags = item.tags.filter(a => a[0] === "t").map(a => a[1]);
 
   return (
     <div className="flex flex-col gap-2">
@@ -36,6 +38,10 @@ export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
       <div className="flex flex-col gap-1 bg-slate-700 p-2 rounded">
         <div>Size: {FormatBytes(size)}</div>
         <div>Uploaded: {new Date(item.created_at * 1000).toLocaleDateString()}</div>
+        <div className="flex items-center gap-2">Tags: <div className="flex gap-1">
+          {tags.map(a => <div className="rounded p-1 bg-slate-400">#{a}</div>)}
+        </div>
+        </div>
         <div>
           <MagnetLink item={item} className="flex gap-1 items-center">
             Get this torrent
@@ -44,6 +50,13 @@ export function TorrentDetail({ item }: { item: TaggedNostrEvent }) {
       </div>
       <h3>Description</h3>
       <pre className="font-mono text-xs bg-slate-700 p-2 rounded overflow-y-auto">{item.content}</pre>
+      <h3>Files</h3>
+      <div className="flex flex-col gap-1 bg-slate-700 p-2 rounded">
+        {files.map(a => <div className="flex items-center gap-2">
+          {a[1]}
+          <small className="text-slate-500 font-semibold">{FormatBytes(Number(a[2]))}</small>
+        </div>)}
+      </div>
     </div>
   );
 }