init

src/element/torrent-list.tsx

@@ -0,0 +1,59 @@
+import "./torrent-list.css";
+import { hexToBech32 } from "@snort/shared";
+import { NostrLink, TaggedNostrEvent } from "@snort/system";
+import { useUserProfile } from "@snort/system-react";
+import { FormatBytes } from "../const";
+import { Link } from "react-router-dom";
+import { MagnetLink } from "./magnet";
+
+export function TorrentList({ items }: { items: Array<TaggedNostrEvent> }) {
+  return (
+    <table className="torrent-list">
+      <thead>
+        <tr>
+          <th>Category</th>
+          <th>Name</th>
+          <th>Uploaded</th>
+          <th></th>
+          <th>Size</th>
+          <th>From</th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((a) => (
+          <TorrentTableEntry item={a} />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function TorrentTableEntry({ item }: { item: TaggedNostrEvent }) {
+  const profile = useUserProfile(item.pubkey);
+  const name = item.tags.find((a) => a[0] === "title")?.at(1);
+  const size = Number(item.tags.find((a) => a[0] === "size")?.at(1));
+  const npub = hexToBech32("npub", item.pubkey);
+  return (
+    <tr>
+      <td>
+        {item.tags
+          .filter((a) => a[0] === "t")
+          .map((a) => a[1])
+          .join(" > ")}
+      </td>
+      <td>
+        <Link to={`/e/${NostrLink.fromEvent(item).encode()}`} state={item}>
+          {name}
+        </Link>
+      </td>
+      <td>{new Date(item.created_at * 1000).toLocaleDateString()}</td>
+      <td>
+        <MagnetLink item={item} />
+      </td>
+      <td>{FormatBytes(size)}</td>
+      <td>
+        <Link to={`/p/${npub}`}>{profile?.name ?? npub.slice(0, 12)}</Link>
+      </td>
+    </tr>
+  );
+}