Refactored website components. New layout.

src/components/common/GridRow.tsx

@@ -5,13 +5,13 @@ const LAYOUTS = {
   two: {
     columns: {
       xs: '1fr',
-      md: 'repeat(auto-fill, minmax(600px, 1fr))',
+      md: 'repeat(auto-fill, minmax(560px, 1fr))',
     },
   },
   three: {
     columns: {
       xs: '1fr',
-      md: 'repeat(auto-fill, minmax(400px, 1fr))',
+      md: 'repeat(auto-fill, minmax(360px, 1fr))',
     },
   },
   'one-two': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } },

src/components/common/PageBody.tsx

@@ -3,13 +3,14 @@ import { ReactNode } from 'react';
 import { AlertBanner, Loading, Column } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 
-export function Page({
+export function PageBody({
+  maxWidth = '1600px',
   error,
   isLoading,
   children,
   ...props
 }: {
-  className?: string;
+  maxWidth?: string;
   error?: unknown;
   isLoading?: boolean;
   children?: ReactNode;
@@ -25,7 +26,7 @@ export function Page({
   }
 
   return (
-    <Column {...props} width="100%" maxWidth="1320px" margin="auto" paddingBottom="9">
+    <Column {...props} width="100%" paddingBottom="9" style={{ margin: '0 auto', maxWidth }}>
       {children}
     </Column>
   );

src/components/common/PageHeader.tsx

@@ -15,8 +15,14 @@ export function PageHeader({
   children?: ReactNode;
 }) {
   return (
-    <Row justifyContent="space-between" alignItems="center" paddingY="6" border="bottom">
-      <Row gap="3">
+    <Row
+      justifyContent="space-between"
+      alignItems="center"
+      paddingY="6"
+      border="bottom"
+      width="100%"
+    >
+      <Row alignItems="center" gap="3">
         {icon && <Icon>{icon}</Icon>}
         {title && <Heading size="4">{title}</Heading>}
         {description && <Text color="muted">{description}</Text>}

src/components/common/SideMenu.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Text, List, ListItem, Icon, Row } from '@umami/react-zen';
+import { Text, NavMenu, NavMenuItem, Icon, Row } from '@umami/react-zen';
+import Link from 'next/link';
 
 export interface SideMenuProps {
   items: { id: string; label: string; url: string; icon?: ReactNode }[];
@@ -8,17 +9,19 @@ export interface SideMenuProps {
 
 export function SideMenu({ items, selectedKey }: SideMenuProps) {
   return (
-    <List>
+    <NavMenu highlightColor="3">
       {items.map(({ id, label, url, icon }) => {
         return (
-          <ListItem key={id} id={id} href={url}>
-            <Row alignItems="center" gap>
-              {icon && <Icon>{icon}</Icon>}
-              <Text weight={id === selectedKey ? 'bold' : 'regular'}>{label}</Text>
-            </Row>
-          </ListItem>
+          <Link key={id} href={url}>
+            <NavMenuItem isSelected={id === selectedKey}>
+              <Row alignItems="center" gap>
+                {icon && <Icon>{icon}</Icon>}
+                <Text>{label}</Text>
+              </Row>
+            </NavMenuItem>
+          </Link>
         );
       })}
-    </List>
+    </NavMenu>
   );
 }