quantified.uncertainty/metaforecast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: section anchors

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-05-31 23:59:51 +03:00
parent 6e25f8bcd2
commit 558c0964e4
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/web/questions/pages/QuestionPage.tsx
View File

@ -42,10 +42,27 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
}; };
}; };
const Section: React.FC<{ title: string }> = ({ title, children }) => ( const Section: React.FC<{ title: string; id?: string }> = ({
<div className="space-y-4 flex flex-col items-start"> title,
<div className="border-b-2 border-gray-200 w-full"> children,
<h2 className="text-xl leading-3 text-gray-900">{title}</h2> id,
}) => (
<div className="space-y-4 flex flex-col items-start" id={id}>
<div className="border-b-2 border-gray-200 w-full group">
<h2 className="text-xl leading-3 text-gray-900">
<span>{title}</span>
{id ? (
<>
{" "}
<a
className="text-gray-300 no-underline hidden group-hover:inline"
href={`#${id}`}
>
#
</a>
</>
) : null}
</h2>
</div> </div>
<div>{children}</div> <div>{children}</div>
</div> </div>
@ -56,7 +73,7 @@ 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"> <Section title="Embed" id="embed">
<div className="mb-2"> <div className="mb-2">
<BoxedLink url={url} size="small"> <BoxedLink url={url} size="small">
Preview Preview
@ -86,7 +103,7 @@ const LargeQuestionCard: React.FC<{
</div> </div>
<div className="mx-auto max-w-prose space-y-8"> <div className="mx-auto max-w-prose space-y-8">
<Section title="Question description"> <Section title="Question description" id="description">
<ReactMarkdown <ReactMarkdown
linkTarget="_blank" linkTarget="_blank"
className="font-normal text-gray-900" className="font-normal text-gray-900"
@ -94,10 +111,10 @@ const LargeQuestionCard: React.FC<{
{question.description.replaceAll("---", "")} {question.description.replaceAll("---", "")}
</ReactMarkdown> </ReactMarkdown>
</Section> </Section>
<Section title="Indicators"> <Section title="Indicators" id="indicators">
<IndicatorsTable question={question} /> <IndicatorsTable question={question} />
</Section> </Section>
<Section title="Capture"> <Section title="Capture" id="capture">
<CaptureQuestion question={question} /> <CaptureQuestion question={question} />
</Section> </Section>
<EmbedSection question={question} /> <EmbedSection question={question} />