refactor(website): extract shared code heading styling into component (#9414)

* refactor(website): extract shared code heading styling into component

* chore: remove redundant variable
This commit is contained in:
Suneet Tipirneni
2023-04-17 17:33:51 -04:00
committed by GitHub
parent 5d1a4c27d5
commit f1fdd5b010
5 changed files with 45 additions and 33 deletions

View File

@@ -1,20 +1,18 @@
import type { ApiEnumMember } from '@microsoft/api-extractor-model';
import { Anchor } from '../../Anchor';
import { NameText } from '../../NameText';
import { SignatureText } from '../../SignatureText';
import { TSDoc } from '../../documentation/tsdoc/TSDoc';
import { CodeHeading } from '~/components/CodeHeading';
export function EnumMember({ member }: { member: ApiEnumMember }) {
return (
<div className="flex flex-col scroll-mt-30" id={member.displayName}>
<div className="flex flex-col gap-2 md:flex-row md:place-items-center md:-ml-8.5">
<Anchor href={`#${member.displayName}`} />
<NameText name={member.name} />
<h4 className="font-bold">=</h4>
<CodeHeading className="md:-ml-8.5" href={`#${member.displayName}`}>
{member.name}
<span>=</span>
{member.initializerExcerpt ? (
<SignatureText excerpt={member.initializerExcerpt} model={member.getAssociatedModel()!} />
) : null}
</div>
</CodeHeading>
{member.tsdocComment ? <TSDoc item={member} tsdoc={member.tsdocComment.summarySection} /> : null}
</div>
);

View File

@@ -1,7 +1,7 @@
import type { ApiMethod, ApiMethodSignature } from '@microsoft/api-extractor-model';
import { ApiItemKind } from '@microsoft/api-extractor-model';
import { useMemo } from 'react';
import { Anchor } from '~/components/Anchor';
import { CodeHeading } from '~/components/CodeHeading';
import { ExcerptText } from '~/components/ExcerptText';
import { resolveParameters } from '~/util/model';
@@ -49,14 +49,11 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
) : null}
</div>
) : null}
<div className="flex flex-row flex-wrap place-items-center gap-1">
<Anchor href={`#${key}`} />
<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(method)}</h4>
<h4 className="font-mono text-lg font-bold">:</h4>
<h4 className="break-all font-mono text-lg font-bold">
<ExcerptText excerpt={method.returnTypeExcerpt} model={method.getAssociatedModel()!} />
</h4>
</div>
<CodeHeading href={`#${key}`}>
{getShorthandName(method)}
<span>:</span>
<ExcerptText excerpt={method.returnTypeExcerpt} model={method.getAssociatedModel()!} />
</CodeHeading>
</div>
</div>
);