refactor: <FunctionParameters> now accepts params instead of func

Author: YDX-2147483647

src/components/templates/FuncTemplate.tsx

@@ -79,7 +79,7 @@ export const FuncTemplate: FC<FuncTemplateProps> = ({
 			</div>
 
 			<div class="my-6">
-				<FunctionParameters func={content} />
+				<FunctionParameters params={content.params} />
 			</div>
 
 			<ScopedDefinitions scope={content.scope} />

src/components/templates/GroupTemplate.tsx

@@ -1,6 +1,6 @@
 import type { FC } from "hono/jsx";
 import { Translation } from "../../translation/index.js";
-import type { Func, GroupBody, Page } from "../../types/model";
+import type { GroupBody, Page } from "../../types/model";
 import { FunctionDisplay, FunctionParameters, Tooltip } from "../ui";
 import { HtmlContent } from "../ui/HtmlContent";
 import BaseTemplate, { type BaseTemplateProps } from "./BaseTemplate";
@@ -59,9 +59,9 @@ export const GroupTemplate: FC<GroupTemplateProps> = ({
 					<h2 id="global-attributes">
 						<Translation translationKey="globalAttributes" />
 					</h2>
-					{/* TODO: Correct the heading levels below */}
 					<FunctionParameters
-						func={{ params: content.global_attributes } as Func}
+						params={content.global_attributes}
+						globalAttributes={true}
 						prefix="global-attributes"
 					/>
 				</>

src/components/ui/FunctionDisplay.tsx

@@ -60,7 +60,7 @@ export const FunctionDisplay: FC<FunctionDisplayProps> = ({
 			</div>
 
 			<div class="my-4">
-				<FunctionParameters func={func} prefix={prefix} />
+				<FunctionParameters params={func.params} prefix={prefix} />
 			</div>
 		</>
 	);

src/components/ui/FunctionParameters.tsx

@@ -1,7 +1,7 @@
 import type { FC } from "hono/jsx";
 import { basePath } from "../../metadata";
 import { Translation } from "../../translation/";
-import type { Func } from "../../types/model";
+import type { Param } from "../../types/model";
 import { normalizeDetailBlocks } from "../../utils/normalizeModel";
 import { joinPath } from "../../utils/path";
 import { ChevronRightIcon } from "../icons";
@@ -11,7 +11,9 @@ import { TypeIcon } from "./TypeIcon";
 import { buildParamId, type2href } from "./type2href";
 
 type FunctionParametersProps = {
-	func: Func;
+	params: Param[];
+	/** Whether these parameter are global attributes */
+	globalAttributes?: boolean;
 	/**
 	 * The prefix for IDs
 	 *
@@ -21,17 +23,19 @@ type FunctionParametersProps = {
 };
 
 export const FunctionParameters: FC<FunctionParametersProps> = ({
-	func,
+	params,
+	globalAttributes = false,
 	prefix = undefined,
 }) => {
+	const Heading = globalAttributes ? "h3" : "h4";
 	return (
 		<div class="space-y-6">
-			{func.params.map((param, _index) => (
+			{params.map((param, _index) => (
 				<div
 					key={param.name}
 					class="bg-gray-50 rounded-md p-4 border border-gray-100"
 				>
-					<h4
+					<Heading
 						id={buildParamId(param.name, prefix)}
 						class="flex flex-wrap items-center gap-2 mb-3"
 					>
@@ -57,7 +61,7 @@ export const FunctionParameters: FC<FunctionParametersProps> = ({
 							{param.variadic && <Tooltip kind="variadic" />}
 							{param.settable && <Tooltip kind="settable" />}
 						</div>
-					</h4>
+					</Heading>
 
 					{normalizeDetailBlocks(param).map((block) => {
 						switch (block.kind) {

src/types/model.ts

@@ -79,7 +79,7 @@ export type Func = {
 } & WithDeprecation &
 	WithDetailsBlocks;
 
-type Param = {
+export type Param = {
 	name: string;
 	types: string[];
 	strings: Str[];