make page layout kind narrow

grommet · Dec 6, 2023 · a6f3e9a · a6f3e9a
1 parent d02e898
commit a6f3e9a
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/design-system-manager/src/app/components/[id]/page.tsx b/design-system-manager/src/app/components/[id]/page.tsx
@@ -16,7 +16,26 @@ const Component = async ({
 }) => {
   const component: ComponentType = await getComponent(params.id);
 
-  return (<Detail component={component} />);
+  return (
+  <>
+    <Detail component={component} />
+    <PageHeader title="Resources" level={2} actions={<Button label="Edit" />} />
+    <Heading level={3}>Design</Heading>
+    <Heading level={3}>Code</Heading>
+    <Heading level={2}>Design</Heading>
+    <Heading level={3}>Anatomy</Heading>
+    <Heading level={3}>Interactive states</Heading>
+    <Heading level={3}>Color</Heading>
+    <Heading level={3}>Behaviors</Heading>
+    <Heading level={2}>Usage</Heading>
+    <Heading level={3}>Modifiers and configurations</Heading>
+    <Heading level={3}>Use case examples</Heading>
+    <Heading level={2}>References</Heading>
+    <Heading level={3}>Documentation</Heading>
+    <Heading level={3}>Research</Heading>
+    <Heading level={3}>Design criteria</Heading>
+    <Heading level={3}>Design rationale</Heading>
+  </>);
 };
 
 export default Component;