mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 03:24:41 +12:00
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:
parent
5d1a4c27d5
commit
f1fdd5b010
5 changed files with 45 additions and 33 deletions
28
apps/website/src/components/CodeHeading.tsx
Normal file
28
apps/website/src/components/CodeHeading.tsx
Normal file
|
@ -0,0 +1,28 @@
|
|||
import type { ReactNode } from 'react';
|
||||
import { Anchor } from './Anchor';
|
||||
|
||||
export interface CodeListingProps {
|
||||
/**
|
||||
* The value of this heading.
|
||||
*/
|
||||
children: ReactNode;
|
||||
/**
|
||||
* Additional class names to apply to the root element.
|
||||
*/
|
||||
className?: string | undefined;
|
||||
/**
|
||||
* The href of this heading.
|
||||
*/
|
||||
href?: string | undefined;
|
||||
}
|
||||
|
||||
export function CodeHeading({ href, className, children }: CodeListingProps) {
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-row flex-wrap place-items-center gap-1 break-all font-mono text-lg font-bold ${className}`}
|
||||
>
|
||||
{href ? <Anchor href={href} /> : null}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -1,3 +0,0 @@
|
|||
export function NameText({ name }: { name: string }) {
|
||||
return <h4 className="break-all font-mono text-lg font-bold">{name}</h4>;
|
||||
}
|
|
@ -5,7 +5,7 @@ import type {
|
|||
ApiPropertySignature,
|
||||
} from '@microsoft/api-extractor-model';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { Anchor } from './Anchor';
|
||||
import { CodeHeading } from './CodeHeading';
|
||||
import { ExcerptText } from './ExcerptText';
|
||||
import { InheritanceText } from './InheritanceText';
|
||||
import { TSDoc } from './documentation/tsdoc/TSDoc';
|
||||
|
@ -55,21 +55,13 @@ export function Property({
|
|||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-row flex-wrap place-items-center gap-1">
|
||||
<Anchor href={`#${item.displayName}`} />
|
||||
<h4 className="break-all font-mono text-lg font-bold">
|
||||
{item.displayName}
|
||||
{item.isOptional ? '?' : ''}
|
||||
</h4>
|
||||
<CodeHeading href={`#${item.displayName}`}>
|
||||
{`${item.displayName}${item.isOptional ? '?' : ''}`}
|
||||
<span>{separator}</span>
|
||||
{item.propertyTypeExcerpt.text ? (
|
||||
<>
|
||||
<h4 className="font-mono text-lg font-bold">{separator}</h4>
|
||||
<h4 className="break-all font-mono text-lg font-bold">
|
||||
<ExcerptText excerpt={item.propertyTypeExcerpt} model={item.getAssociatedModel()!} />
|
||||
</h4>
|
||||
</>
|
||||
<ExcerptText excerpt={item.propertyTypeExcerpt} model={item.getAssociatedModel()!} />
|
||||
) : null}
|
||||
</div>
|
||||
</CodeHeading>
|
||||
</div>
|
||||
{hasSummary || inheritedFrom ? (
|
||||
<div className="mb-4 flex flex-col gap-4">
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue