fix: hopefully fix everything that was broken/changed

Signed-off-by: Antony Bouyon <antony.bouyon@believe.com>

docs-ui/src/app/hooks/page.mdx

@@ -1,13 +1,7 @@
-import { ComponentCard, ComponentCards } from '@/components/ComponentCards';
+import { HookGrid } from '@/components/HookGrid';
 
 # Hooks
 
 Backstage UI custom hooks provide easy access to design system features, style management, and responsive interface creation.
 
-<ComponentCards>
-  <ComponentCard
-    title="useBreakpoint"
-    description="Responsive breakpoint detection hook (performance optimizations in progress)."
-    href="/hooks/use-breakpoint"
-  />
-</ComponentCards>
+<HookGrid />

docs-ui/src/app/hooks/use-breakpoint/components.tsx

@@ -1,20 +1,9 @@
 'use client';
 
 import { useBreakpoint } from '@backstage/ui';
-import { useEffect, useState } from 'react';
 
 export function UseBreakpointExample() {
   const { breakpoint, up, down } = useBreakpoint();
-  const [isMounted, setIsMounted] = useState(false);
-
-  // prevent hydration mismatch by rendering only on the client
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) {
-    return null;
-  }
 
   return (
     <div>

docs-ui/src/app/hooks/use-breakpoint/page.mdx

@@ -3,9 +3,9 @@ import { PageTitle } from '@/components/PageTitle';
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Banner } from '@/components/Banner';
-import { UseBreakpointExample } from './components';
 import { useBreakpointReturnDefs } from './props-definition';
 import { useBreakpointExampleSnippet } from './snippets';
+import { UseBreakpointExample } from './components';
 
 <PageTitle
   title="useBreakpoint"

docs-ui/src/components/HookGrid/HookGrid.module.css

@@ -0,0 +1,29 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--primary);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+}

docs-ui/src/components/HookGrid/HookGrid.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import Link from 'next/link';
+import { hooks } from '@/utils/data';
+import styles from './HookGrid.module.css';
+
+export const HookGrid = () => {
+  return (
+    <div className={styles.grid}>
+      {hooks.map(item => (
+        <Link
+          key={item.slug}
+          href={`/hooks/${item.slug}`}
+          className={styles.item}
+        >
+          {item.title}
+        </Link>
+      ))}
+    </div>
+  );
+};

docs-ui/src/components/HookGrid/index.ts

@@ -0,0 +1 @@
+export * from './HookGrid';

docs-ui/src/components/Navigation/Navigation.tsx

@@ -18,19 +18,6 @@ interface NavigationProps {
   onLinkClick?: () => void;
 }
 
-const data = [
-  {
-    title: 'Components',
-    content: components,
-    url: '/components',
-  },
-  {
-    title: 'Hooks',
-    content: hooks,
-    url: '/hooks',
-  },
-];
-
 export const Navigation = ({ onLinkClick }: NavigationProps) => {
   const pathname = usePathname();
 
@@ -105,6 +92,29 @@ export const Navigation = ({ onLinkClick }: NavigationProps) => {
           </Link>
         );
       })}
+      <div className={styles.sectionTitle}>
+        <RiCollageLine size={20} /> <span>Hooks</span>
+      </div>
+      {hooks.map(item => {
+        const isActive = pathname === `/hooks/${item.slug}`;
+        return (
+          <Link
+            href={`/hooks/${item.slug}`}
+            key={item.slug}
+            className={clsx(styles.line, { [styles.active]: isActive })}
+            onClick={onLinkClick}
+          >
+            <div className={styles.lineTitle}>{item.title}</div>
+            <div className={styles.lineStatus}>
+              {item.status === 'alpha' && 'Alpha'}
+              {item.status === 'beta' && 'Beta'}
+              {item.status === 'inProgress' && 'In Progress'}
+              {item.status === 'stable' && 'Stable'}
+              {item.status === 'deprecated' && 'Deprecated'}
+            </div>
+          </Link>
+        );
+      })}
     </>
   );
 };