Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-13 10:03:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(website): extract layouts and use more server components (#9027)

Browse Source 
Closes https://github.com/discordjs/discord.js/issues/8920
Closes https://github.com/discordjs/discord.js/issues/8997
This commit is contained in:
Suneet Tipirneni
2023-01-10 12:25:14 -05:00
committed by GitHub
parent 158db474b7
commit 39c4de2dbc
73 changed files with 1831 additions and 1476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/website/src/components/Property.tsx Normal file
View File

@@ -0,0 +1,69 @@
import type { ApiDeclaredItem, ApiItemContainerMixin, ApiPropertyItem } from '@microsoft/api-extractor-model';
import type { PropsWithChildren } from 'react';
import { Anchor } from './Anchor';
import { ExcerptText } from './ExcerptText';
import { InheritanceText } from './InheritanceText';
import { TSDoc } from './documentation/tsdoc/TSDoc';
export enum PropertySeparatorType {
Type = ':',
Value = '=',
}
export function Property({
item,
children,
separator,
inheritedFrom,
}: PropsWithChildren<{
inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
item: ApiPropertyItem;
separator?: PropertySeparatorType;
}>) {
const isDeprecated = Boolean(item.tsdocComment?.deprecatedBlock);
const hasSummary = Boolean(item.tsdocComment?.summarySection);
return (
<div className="scroll-mt-30 flex flex-col gap-4" id={item.displayName}>
<div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
<Anchor href={`#${item.displayName}`} />
{isDeprecated || item.isReadonly || item.isOptional ? (
<div className="flex flex-row gap-1">
{isDeprecated ? (
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{item.isReadonly ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{item.isOptional ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}
</div>
) : null}
<div className="flex flex-row flex-wrap place-items-center gap-1">
<h4 className="break-all font-mono text-lg font-bold">
{item.displayName}
{item.isOptional ? '?' : ''}
</h4>
<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>
</div>
</div>
{hasSummary || inheritedFrom ? (
<div className="mb-4 flex flex-col gap-4">
{item.tsdocComment ? <TSDoc item={item} tsdoc={item.tsdocComment} /> : null}
{inheritedFrom ? <InheritanceText parent={inheritedFrom} /> : null}
{children}
</div>
) : null}
</div>
);
}