feat: collapsible embed preview instead of button

src/web/common/Collapsible.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { FaCaretDown, FaCaretRight } from "react-icons/fa";
+
+export const Collapsible: React.FC<{
+  title: string;
+  children: () => React.ReactElement | null;
+}> = ({ title, children }) => {
+  const [open, setOpen] = useState(false);
+
+  const expand = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    setOpen(true);
+  };
+
+  const collapse = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    setOpen(false);
+  };
+
+  if (open) {
+    return (
+      <div>
+        <a
+          href="#"
+          className="decoration-dashed inline-flex items-center"
+          onClick={collapse}
+        >
+          {title} <FaCaretDown />
+        </a>
+        <div>{children()}</div>
+      </div>
+    );
+  } else {
+    return (
+      <a
+        href="#"
+        className="decoration-dashed inline-flex items-center"
+        onClick={expand}
+      >
+        {title} <FaCaretRight />
+      </a>
+    );
+  }
+};

src/web/questions/pages/QuestionPage.tsx

@@ -1,8 +1,9 @@
 import { GetServerSideProps, NextPage } from "next";
 import NextError from "next/error";
+import React from "react";
 import ReactMarkdown from "react-markdown";
-import { BoxedLink } from "../../common/BoxedLink";
 import { Card } from "../../common/Card";
+import { Collapsible } from "../../common/Collapsible";
 import { CopyParagraph } from "../../common/CopyParagraph";
 import { Layout } from "../../common/Layout";
 import { Query } from "../../common/Query";
@@ -74,15 +75,15 @@ const EmbedSection: React.FC<{ question: QuestionWithHistoryFragment }> = ({
   const url = getBasePath() + `/questions/embed/${question.id}`;
   return (
     <Section title="Embed" id="embed">
-      <div className="mb-2">
-        <BoxedLink url={url} size="small">
-          Preview
-        </BoxedLink>
-      </div>
       <CopyParagraph
         text={`<iframe src="${url}" height="600" width="600" frameborder="0" />`}
         buttonText="Copy HTML"
       />
+      <div className="mt-2">
+        <Collapsible title="Preview">
+          {() => <iframe src={url} height="600" width="600" frameBorder="0" />}
+        </Collapsible>
+      </div>
     </Section>
   );
 };