added frontend WS connection for demonstration purposes

1 files changed, 35 insertions, 0 deletions

diff --git a/gui/src/components/post/Media.tsx b/gui/src/components/post/Media.tsx
new file mode 100644
index 0000000..04ea156
--- /dev/null
+++ b/gui/src/components/post/Media.tsx
@@ -0,0 +1,35 @@
+import type { Media } from "@/types/trill";
+interface Props {
+  media: Media[];
+}
+function M({ media }: Props) {
+  return (
+    <div className="body-media">
+      {media.map((m, i) => {
+        return "video" in m.media ? (
+          <video key={JSON.stringify(m) + i} src={m.media.video} controls />
+        ) : "audio" in m.media ? (
+          <audio key={JSON.stringify(m) + i} src={m.media.audio} controls />
+        ) : "images" in m.media ? (
+          <Images key={JSON.stringify(m) + i} urls={m.media.images} />
+        ) : null;
+      })}
+    </div>
+  );
+}
+export default M;
+
+function Images({ urls }: { urls: string[] }) {
+  return (
+    <>
+      {urls.map((u, i) => (
+        <img
+          key={u + i}
+          className={`body-img body-img-1-of-${urls.length}`}
+          src={u}
+          alt=""
+        />
+      ))}
+    </>
+  );
+}