feat(website): add implements for class (#8388)

Co-authored-by: Noel <buechler.noel@outlook.com>

packages/website/src/components/DocContainer.tsx

@@ -18,10 +18,20 @@ export interface DocContainerProps {
 	summary?: ReturnType<DocItem['toJSON']>['summary'];
 	children?: ReactNode;
 	extendsTokens?: TokenDocumentation[] | null;
+	implementsTokens?: TokenDocumentation[][];
 	typeParams?: TypeParameterData[];
 }
 
-export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
+export function DocContainer({
+	name,
+	kind,
+	excerpt,
+	summary,
+	typeParams,
+	children,
+	extendsTokens,
+	implementsTokens,
+}: DocContainerProps) {
 	return (
 		<div className="flex flex-col min-h-full max-h-full grow">
 			<div className="border-0.5 border-gray px-10 py-2">
@@ -43,13 +53,27 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 				</SyntaxHighlighter>
 				{extendsTokens?.length ? (
 					<div className="flex flex-row items-center dark:text-white gap-3">
-						<h3 className="m-0">Extends:</h3>
+						<h3 className="m-0">Extends</h3>
 						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono break-all">
 							<HyperlinkedText tokens={extendsTokens} />
 						</p>
 					</div>
 				) : null}
+				{implementsTokens?.length ? (
+					<div className="flex flex-row items-center dark:text-white gap-3">
+						<h3 className="m-0">Implements</h3>
+						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
+						<p className="font-mono break-all">
+							{implementsTokens.map((token, i) => (
+								<>
+									<HyperlinkedText key={i} tokens={token} />
+									{i < implementsTokens.length - 1 ? ', ' : ''}
+								</>
+							))}
+						</p>
+					</div>
+				) : null}
 				<div className="space-y-10">
 					<Section iconElement={<VscListSelection />} title="Summary" className="dark:text-white">
 						{summary ? (

packages/website/src/components/HyperlinkedText.tsx

@@ -19,7 +19,7 @@ export function HyperlinkedText({ tokens }: HyperlinkedTextProps) {
 				if (token.path) {
 					return (
 						<Link key={token.text} href={token.path}>
-							<a className="text-blue-500 dark:text-blue-300">{token.text}</a>
+							<a className="text-blue-500 dark:text-blue-300 no-underline">{token.text}</a>
 						</Link>
 					);
 				}

packages/website/src/components/model/Class.tsx

@@ -15,6 +15,7 @@ export function Class({ data }: ClassProps) {
 			summary={data.summary}
 			typeParams={data.typeParameterData}
 			extendsTokens={data.extendsTokens}
+			implementsTokens={data.implementsTokens}
 		>
 			<PropertiesSection data={data.properties} />
 			<MethodsSection data={data.methods} />