refactor: docs design (#8487)

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

@@ -1,18 +1,18 @@
+import { Stack } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { VscSymbolEnumMember } from 'react-icons/vsc';
 import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
 import { DocContainer } from '../DocContainer';
 import { Section } from '../Section';
 import type { DocEnum } from '~/DocModel/DocEnum';
 
-export interface EnumProps {
-	data: ReturnType<DocEnum['toJSON']>;
-}
+export function Enum({ data }: { data: ReturnType<DocEnum['toJSON']> }) {
+	const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
 
-export function Enum({ data }: EnumProps) {
 	return (
 		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
-			<Section iconElement={<VscSymbolEnumMember />} title="Members" className="dark:text-white">
-				<div className="flex flex-col gap-5">
+			<Section title="Members" icon={<VscSymbolEnumMember />} padded dense={matches}>
+				<Stack>
 					{data.members.map((member) => (
 						<CodeListing
 							key={member.name}
@@ -22,7 +22,7 @@ export function Enum({ data }: EnumProps) {
 							summary={member.summary}
 						/>
 					))}
-				</div>
+				</Stack>
 			</Section>
 		</DocContainer>
 	);