diff --git a/packages/app/src/Element/ZapstrEmbed.css b/packages/app/src/Element/ZapstrEmbed.css new file mode 100644 index 0000000..91a8134 --- /dev/null +++ b/packages/app/src/Element/ZapstrEmbed.css @@ -0,0 +1,20 @@ +.zapstr { +} + +.zapstr > img { + margin: 0 10px 0 0; +} + +.zapstr audio { + margin: 0; + height: 2em; +} + +.zapstr .pfp .avatar { + width: 25px; + height: 25px; +} + +.zapstr .pfp .subheader { + text-transform: capitalize; +} diff --git a/packages/app/src/Element/ZapstrEmbed.tsx b/packages/app/src/Element/ZapstrEmbed.tsx index 422682b..19d652d 100644 --- a/packages/app/src/Element/ZapstrEmbed.tsx +++ b/packages/app/src/Element/ZapstrEmbed.tsx @@ -1,11 +1,35 @@ +import "./ZapstrEmbed.css"; import useEventFeed from "Feed/EventFeed"; import Spinner from "Icons/Spinner"; import { NostrLink } from "Util"; -import Text from "./Text"; +import { ProxyImg } from "Element/ProxyImg"; +import ProfileImage from "Element/ProfileImage"; export default function ZapstrEmbed({ link }: { link: NostrLink }) { const ev = useEventFeed(link); if (!ev.data) return ; - return ; + + const media = ev.data.tags.find(a => a[0] === "media"); + const cover = ev.data.tags.find(a => a[0] === "cover"); + const subject = ev.data.tags.find(a => a[0] === "subject"); + const refPersons = ev.data.tags.filter(a => a[0] === "p"); + return ( + <> +
+ +
+
+

{subject?.[1] ?? ""}

+
+
+
+
+ {refPersons.map(a => ( + {a[2] ?? ""}} className="card" /> + ))} +
+ + ); }