Fixup Parameter Links

Author: CannonLock

components/ParameterBox.tsx

@@ -11,7 +11,7 @@ export const ParameterBox: React.FC<{ parameter: ParameterDetail }> = ({ paramet
 	const parts = parameter.name.split('.');
 	const groupName = parts.length > 1 ? parts.slice(0, -1).join('.') : null;
 	const parameterName = parts.length > 1 ? parts[parts.length - 1] : parameter.name;
-	const parameterId = parameter.name.replace(".", "-")
+	const parameterId = parameter.name.replaceAll(".", "-")
 
 	return (
 	  <Box

components/Parameters.tsx

@@ -61,47 +61,52 @@ const Parameters: React.FC<{ parameters: ParametersArray }> = ({ parameters }) =
 			setSelectedComponent(component);
 			setSearchValue('');
 			}} />
-			{Object.entries(groupedParameters).map(([group, groupParams]) => (
-			<Box 
-				key={group}
-				onMouseEnter={() => setHover(true)}
-				onMouseLeave={() => setHover(false)}
-				>
-				<Typography 
-					sx={{ 
-						marginTop: ".5em"
-							
-					}} 
-					variant="h4" 
-					gutterBottom 
-					id={group}
-				>
-					{group}
-					{hover && group && group !== "" && (
-						<IconButton 
-							size={"small"}
-							onClick={async (e: React.MouseEvent<HTMLButtonElement>) => {
-								e.stopPropagation()
-								// Copy link to clipboard
-								const url = new URL(window.location.href);
-								url.hash = group
-								await navigator.clipboard.writeText(url.toString());
-								window.location.hash = group 
-							}}
-						>
-							<Link fontSize={"small"}/>
-						</IconButton>
-					)}
-				</Typography>
-				
-				{group && group !== "" && (
-				<Divider sx={{ height: "0.5em", backgroundColor: "#0885ff", width: "100%", borderRadius: "0.5em" }} />
-				)}
-				{groupParams.map((param, index) => (
-				<ParameterBox key={param.name} parameter={param} />
-				))}
-			</Box>
-			))}
+			{Object.entries(groupedParameters).map(([group, groupParams]) => {
+
+        const group_hash = group.replaceAll('.', '-');
+
+        return (
+          <Box
+            key={group}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+          >
+            <Typography
+              sx={{
+                marginTop: ".5em"
+
+              }}
+              variant="h4"
+              gutterBottom
+              id={group_hash}
+            >
+              {group}
+              {hover && group && group !== "" && (
+                <IconButton
+                  size={"small"}
+                  onClick={async (e: React.MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation()
+                    // Copy link to clipboard
+                    const url = new URL(window.location.href);
+                    url.hash = group_hash
+                    await navigator.clipboard.writeText(url.toString());
+                    window.location.hash = group_hash
+                  }}
+                >
+                  <Link fontSize={"small"}/>
+                </IconButton>
+              )}
+            </Typography>
+
+            {group && group !== "" && (
+              <Divider sx={{height: "0.5em", backgroundColor: "#0885ff", width: "100%", borderRadius: "0.5em"}}/>
+            )}
+            {groupParams.map((param, index) => (
+              <ParameterBox key={param.name} parameter={param}/>
+            ))}
+          </Box>
+        )
+      })}
 			{filteredParameters.length === 0 && (searchValue || selectedComponent) ? (
 			<Typography variant="h5">No results found</Typography>
 			) : null}

utils/types.ts

@@ -64,7 +64,9 @@ export interface ParameterDetail {
 	name: string;
 	type: string;
   root_default?: string;
-  }
+  client_default?: string;
+  server_default?: string;
+}
 
 export interface Parameter {
 	[key: string]: ParameterDetail;