add Products link in navbar (#1444)

.changeset/tiny-toys-admire.md

@@ -0,0 +1,5 @@
+---
+"@theguild/components": minor
+---
+
+add Products link in navbar

.prettierignore

@@ -5,3 +5,4 @@ storybook-static/
 .changeset/*.md
 website/out/
 pnpm-lock.yaml
+CHANGELOG.md

packages/components/src/components/company-menu.ts → packages/components/src/components/company-menu.tsx

@@ -1,4 +1,20 @@
 import { MenuItem, PageItem } from 'nextra/normalize-pages';
+import { PRODUCTS } from '../products';
+
+export const productsItems = Object.fromEntries(
+  Object.values(PRODUCTS).map(product => [
+    product.name,
+    {
+      title: (
+        <span className="flex items-center gap-2">
+          <product.logo className="h-7 w-auto shrink-0" />
+          {product.name}
+        </span> // todo: fix type in nextra
+      ) as any,
+      href: new URL(product.href).pathname,
+    },
+  ]),
+);
 
 export function addGuildCompanyMenu(items: (PageItem | MenuItem)[]): (PageItem | MenuItem)[] {
   return [
@@ -11,11 +27,6 @@ export function addGuildCompanyMenu(items: (PageItem | MenuItem)[]): (PageItem |
           href: 'https://the-guild.dev/about-us',
           newWindow: true,
         },
-        solutions: {
-          title: 'Solutions',
-          href: 'https://the-guild.dev/solutions',
-          newWindow: true,
-        },
         blog: {
           title: 'Blog',
           href: 'https://the-guild.dev/blog',
@@ -30,6 +41,13 @@ export function addGuildCompanyMenu(items: (PageItem | MenuItem)[]): (PageItem |
       name: 'company',
       route: '#',
     } satisfies MenuItem,
+    {
+      type: 'menu',
+      title: 'Products',
+      items: productsItems,
+      name: 'products',
+      route: '#',
+    } satisfies MenuItem,
     ...items,
   ];
 }

packages/components/src/components/guild-navbar.tsx

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import clsx from 'clsx';
 import { DocsThemeConfig } from 'nextra-theme-docs';
 import { GuildLogo, TheGuild } from '../logos';
@@ -11,7 +12,7 @@ export function GuildUnifiedLogo({
   children: DocsThemeConfig['logo'];
   title: string;
   description: string;
-}) {
+}): ReactElement {
   return (
     <>
       <Anchor

packages/components/src/components/index.ts

@@ -7,7 +7,7 @@ export { HeroGradient } from './hero-gradient';
 export { HeroIllustration } from './hero-illustration';
 export { HeroMarketplace } from './hero-marketplace';
 export { HeroVideo } from './hero-video';
-export * from './icons/index';
+export * from './icons';
 export { Image } from './image';
 export { InfoList } from './info-list';
 export { LegacyPackageCmd } from './legacy-package-cmd';
@@ -19,3 +19,4 @@ export { NPMBadge } from './npm-badge';
 export { Tabs } from './tabs';
 export { GuildUnifiedLogo } from './guild-navbar';
 export { ThemeSwitcherButton } from './theme-switcher';
+export { productsItems } from './company-menu';

packages/components/src/define-config.tsx

@@ -10,7 +10,10 @@ export function defineConfig({
   description,
   logo,
   ...config
-}: DocsThemeConfig & { websiteName: string; description: string }): DocsThemeConfig {
+}: DocsThemeConfig & {
+  websiteName: string;
+  description: string;
+}): DocsThemeConfig {
   if (!config.docsRepositoryBase) {
     throw new Error('Missing required "docsRepositoryBase" property');
   }
@@ -105,7 +108,7 @@ export function defineConfig({
     ),
     navbar: {
       extraContent: <ThemeSwitcherButton />,
-      component: props => <Navbar items={addGuildCompanyMenu(props.items)} />,
+      ...(logo && { component: props => <Navbar items={addGuildCompanyMenu(props.items)} /> }),
     },
     ...config,
     components: {