feat(docs): add menu links to Supabase UI Library (#38827)

* feat: add UI library icon to 'Menu Icons'

* feat: add UI Library links

* stamp: format

* Update apps/docs/app/page.tsx

---------

Co-authored-by: Chris Chinchilla <chris.ward@supabase.io>
Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com>

apps/docs/app/page.tsx

@@ -187,6 +187,13 @@ const additionalResources = [
     icon: 'integrations',
     href: '/guides/integrations',
   },
+  {
+    title: 'Supabase UI',
+    description: 'A collection of pre-built Supabase components to speed up your project.',
+    icon: 'ui',
+    href: 'https://supabase.com/ui',
+    external: true,
+  },
 ]
 
 const HomePage = () => (
@@ -303,6 +310,7 @@ const HomePage = () => (
                   href={resource.href}
                   className="col-span-12 md:col-span-6 lg:col-span-3"
                   passHref
+                  target={resource.external ? '_blank' : undefined}
                 >
                   <GlassPanelWithIconPicker {...resource} background={false}>
                     {resource.description}

apps/docs/components/Navigation/Navigation.commands.tsx

@@ -151,6 +151,12 @@ const navCommands = [
     icon: () => <ArrowRight />,
     enabled: isFeatureEnabled('integrations:partners'),
   },
+  {
+    id: 'nav-ui',
+    name: 'Go to Supabase UI Library',
+    route: 'https://supabase.com/ui',
+    icon: () => <ArrowRight />,
+  },
 ] satisfies Array<ICommand & { enabled?: boolean }>
 
 const filteredNavCommands = navCommands.filter((command) => command.enabled !== false)

apps/docs/components/Navigation/NavigationMenu/MenuIconPicker.tsx

@@ -30,6 +30,7 @@ import {
   IconSecurity,
   IconSupport,
   IconTroubleshooting,
+  IconUI,
 } from './MenuIcons'
 
 function getMenuIcon(menuKey: string, width: number = 16, height: number = 16, className?: string) {
@@ -102,6 +103,8 @@ function getMenuIcon(menuKey: string, width: number = 16, height: number = 16, c
       return <Clock width={width} height={height} className={className} />
     case 'queues':
       return <SquareStack width={width} height={height} className={className} />
+    case 'ui':
+      return <IconUI width={width} height={height} className={className} />
     default:
       return <IconMenuPlatform width={width} height={height} className={className} />
   }

apps/docs/components/Navigation/NavigationMenu/MenuIcons.tsx

@@ -666,3 +666,31 @@ export function IconTroubleshooting({ width = 16, height = 16, className }: Home
     </svg>
   )
 }
+
+export function IconUI({ width = 16, height = 16, className }: HomeMenuIcon) {
+  return (
+    <svg
+      className={className}
+      width={width}
+      height={height}
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="0.973313"
+        y="0.64"
+        width="14.72"
+        height="14.72"
+        rx="1.92"
+        stroke="currentColor"
+        stroke-width="1.28"
+      />
+      <path
+        d="M8.56519 4.69238H9.74564V8.94966C9.74564 9.41632 9.63534 9.82678 9.41473 10.181C9.19625 10.5353 8.88867 10.8121 8.492 11.0115C8.09534 11.2087 7.63185 11.3074 7.10155 11.3074C6.56913 11.3074 6.10458 11.2087 5.70791 11.0115C5.31125 10.8121 5.00367 10.5353 4.78519 10.181C4.5667 9.82678 4.45746 9.41632 4.45746 8.94966V4.69238H5.63791V8.85102C5.63791 9.12253 5.69731 9.36435 5.81609 9.57647C5.937 9.7886 6.1067 9.95511 6.32519 10.076C6.54367 10.1948 6.80246 10.2542 7.10155 10.2542C7.40064 10.2542 7.65943 10.1948 7.87791 10.076C8.09852 9.95511 8.26822 9.7886 8.387 9.57647C8.50579 9.36435 8.56519 9.12253 8.56519 8.85102V4.69238Z"
+        fill="currentColor"
+      />
+      <path d="M12.2092 4.69238V11.2087H11.0287V4.69238H12.2092Z" fill="currentColor" />
+    </svg>
+  )
+}

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -261,6 +261,12 @@ export const GLOBAL_MENU_ITEMS: GlobalMenuItems = [
             href: '/reference/api/introduction' as `/${string}`,
             level: 'reference_javascript',
           },
+          {
+            label: 'UI Library',
+            icon: 'ui',
+            href: 'https://supabase.com/ui' as `/${string}`,
+            level: 'ui',
+          },
         ],
         [
           { label: 'Data API' },