feat: collapsible embed preview instead of button

This commit is contained in:
Vyacheslav Matyukhin 2022-06-01 23:31:41 +03:00
parent c051f0dc7d
commit cc2257b626
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
2 changed files with 51 additions and 6 deletions

View File

@ -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>
);
}
};

View File

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