feat(website): add detailed property and method documentation (#8252)

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

packages/website/src/components/DocContainer.tsx

@@ -1,5 +1,6 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { Separator } from './Seperator';
 import { TypeParamTable } from './TypeParamTable';
 import { generateIcon } from '~/util/icon';
 import type { TypeParameterData } from '~/util/parse.server';
@@ -9,38 +10,43 @@ export interface DocContainerProps {
 	kind: string;
 	excerpt: string;
 	summary?: string | null;
-	children?: JSX.Element;
+	children?: JSX.Element | JSX.Element[];
 	typeParams?: TypeParameterData[];
 }
 
 export function DocContainer({ name, kind, excerpt, summary, typeParams, children }: DocContainerProps) {
 	return (
-		<div className="px-10">
-			<h1 className="font-mono flex items-center content-center break-all">
-				{generateIcon(kind, 'mr-2')}
-				{name}
-			</h1>
-			<h3>Code declaration:</h3>
-			<div>
-				<SyntaxHighlighter
-					wrapLines
-					wrapLongLines
-					language="typescript"
-					style={vs}
-					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-				>
-					{excerpt}
-				</SyntaxHighlighter>
+		<>
+			<div className="bg-white border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-5">
+				<h1 className="font-mono break-all m-0">
+					{generateIcon(kind, 'mr-2')}
+					{name}
+				</h1>
 			</div>
-			{typeParams?.length ? (
-				<>
-					<h3>Type Parameters</h3>
-					<TypeParamTable data={typeParams} />
-				</>
-			) : null}
-			<h3>Summary</h3>
-			<p>{summary ?? 'No summary provided.'}</p>
-			{children}
-		</div>
+			<div className="p-10">
+				<div>
+					<SyntaxHighlighter
+						wrapLines
+						wrapLongLines
+						language="typescript"
+						style={vs}
+						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+					>
+						{excerpt}
+					</SyntaxHighlighter>
+				</div>
+				<h2>Summary</h2>
+				<p className="color-slate-500">{summary ?? 'No summary provided.'}</p>
+				<Separator />
+				{typeParams?.length ? (
+					<>
+						<h2>Type Parameters</h2>
+						<TypeParamTable data={typeParams} className="mb-5 p-3" />
+						<Separator />
+					</>
+				) : null}
+				<div>{children}</div>
+			</div>
+		</>
 	);
 }