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

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

* chore: remove redundant variable

Author: suneettipirneni

apps/website/src/components/CodeHeading.tsx

@@ -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>
+	);
+}

apps/website/src/components/NameText.tsx

@@ -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">

apps/website/src/components/Property.tsx

@@ -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>
 	);

apps/website/src/components/model/enum/EnumMember.tsx

@@ -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>
 	);