feat: embed pdfs (#48)

Author: cykreet

packages/web/src/components/embed/embed.tsx

@@ -5,6 +5,7 @@ import { EmbedImage } from "./variants/embed-image";
 import { EmbedMarkdown } from "./variants/embed-markdown";
 import { EmbedText } from "./variants/embed-text";
 import { EmbedVideo } from "./variants/embed-video";
+import { EmbedDocument } from "./variants/embed-document";
 
 interface EmbedProps {
   data: Embeddable;
@@ -18,6 +19,11 @@ export const Embed: FC<EmbedProps> = ({ data }) => {
   const isImage = EmbedImage.embeddable(data);
   const isVideo = EmbedVideo.embeddable(data);
   const isMarkdown = EmbedMarkdown.embeddable(data);
+  const isDocument = EmbedDocument.embeddable(data);
+
+  if (isDocument) {
+    return <EmbedDocument file={data} />;
+  }
 
   if (isMarkdown) {
     return <EmbedMarkdown data={data} />;

packages/web/src/components/embed/variants/embed-document.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import { BASE_EMBED_CLASSES, MAX_HEIGHT } from "../embed";
+import type { Embeddable } from "../embeddable";
+
+export const EmbedDocument = ({ file }: { file: Embeddable }) => {
+  const classes = clsx("outline-none h-[70vh] p-4", BASE_EMBED_CLASSES, MAX_HEIGHT);
+
+  return (
+    <object data={file.paths.direct} type="application/pdf" aria-label={file.displayName} className={classes}>
+      This browser does not support PDFs. You can download the file{" "}
+      <a className="text-primary" href={file.paths.direct} target="_blank" rel="noreferrer">
+        here
+      </a>
+      .
+    </object>
+  );
+};
+
+EmbedDocument.embeddable = (data: Embeddable) => {
+  switch (data.type) {
+    case "application/pdf": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+};