refactor: docs design (#8487)

packages/website/src/components/Table.tsx

@@ -1,45 +1,37 @@
+import { Table as MantineTable } from '@mantine/core';
 import type { ReactNode } from 'react';
 
-export interface RowData {
-	monospace?: boolean;
-	content: string;
-}
-
-export interface TableProps {
+export function Table({
+	rows,
+	columns,
+	columnStyles,
+}: {
 	columns: string[];
 	columnStyles?: Record<string, string>;
 	rows: Record<string, ReactNode>[];
-	className?: string | undefined;
-}
-
-export function Table({ rows, columns, columnStyles, className }: TableProps) {
+}) {
 	return (
-		<div className={className}>
-			<table className="table-fixed w-full pb-10 border-collapse">
-				<thead>
-					<tr>
-						{columns.map((column) => (
-							<th key={column} className="border-b z-10 text-left text-sm pl-2 border-gray">
-								{column}
-							</th>
+		<MantineTable>
+			<thead>
+				<tr>
+					{columns.map((column) => (
+						<th key={column} className="break-normal">
+							{column}
+						</th>
+					))}
+				</tr>
+			</thead>
+			<tbody>
+				{rows.map((row, idx) => (
+					<tr key={idx}>
+						{Object.entries(row).map(([colName, val]) => (
+							<td key={colName} className={columnStyles?.[colName] ?? ''}>
+								{val}
+							</td>
 						))}
 					</tr>
-				</thead>
-				<tbody>
-					{rows.map((row, i) => (
-						<tr key={i}>
-							{Object.entries(row).map(([colName, val]) => (
-								<td
-									key={colName}
-									className={`p-2 text-sm border-b text-left border-gray break-all ${columnStyles?.[colName] ?? ''}`}
-								>
-									{val}
-								</td>
-							))}
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</div>
+				))}
+			</tbody>
+		</MantineTable>
 	);
 }