refactor(website): consolidate badge logic (#9417)

Co-authored-by: Noel <buechler.noel@outlook.com>
This commit is contained in:
Suneet Tipirneni
2023-04-19 12:58:35 -04:00
committed by GitHub
parent 0eb866357b
commit ecd1b5da11
10 changed files with 66 additions and 119 deletions

View File

@@ -5,59 +5,29 @@ import type {
ApiPropertySignature,
} from '@microsoft/api-extractor-model';
import type { PropsWithChildren } from 'react';
import { Badges } from './Badges';
import { CodeHeading } from './CodeHeading';
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: ApiProperty | ApiPropertySignature;
separator?: PropertySeparatorType;
}>) {
const isDeprecated = Boolean(item.tsdocComment?.deprecatedBlock);
const hasSummary = Boolean(item.tsdocComment?.summarySection);
return (
<div className="flex flex-col scroll-mt-30 gap-4" id={item.displayName}>
<div className="flex flex-col gap-2 md:-ml-9">
{isDeprecated || item.isReadonly || item.isOptional || (item as ApiProperty).isStatic ? (
<div className="flex flex-row gap-1 md:ml-7">
{isDeprecated ? (
<div className="h-5 flex 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 as ApiProperty).isStatic ? (
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Static
</div>
) : null}
{item.isReadonly ? (
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{item.isOptional ? (
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}
</div>
) : null}
<Badges item={item} />
<CodeHeading href={`#${item.displayName}`}>
{`${item.displayName}${item.isOptional ? '?' : ''}`}
<span>{separator}</span>
<span>:</span>
{item.propertyTypeExcerpt.text ? (
<ExcerptText excerpt={item.propertyTypeExcerpt} model={item.getAssociatedModel()!} />
) : null}