From cc2257b6262dcbc796b4735ee60ef9bcf48b8071 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Wed, 1 Jun 2022 23:31:41 +0300
Subject: [PATCH] feat: collapsible embed preview instead of button

---
 src/web/common/Collapsible.tsx           | 44 ++++++++++++++++++++++++
 src/web/questions/pages/QuestionPage.tsx | 13 +++----
 2 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 src/web/common/Collapsible.tsx

diff --git a/src/web/common/Collapsible.tsx b/src/web/common/Collapsible.tsx
new file mode 100644
index 0000000..64e2dba
--- /dev/null
+++ b/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>
+    );
+  }
+};
diff --git a/src/web/questions/pages/QuestionPage.tsx b/src/web/questions/pages/QuestionPage.tsx
index d19af1e..db37f9c 100644
--- a/src/web/questions/pages/QuestionPage.tsx
+++ b/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>
   );
 };