Layout Component

import { Layout } from '@/components/shared/layout'

export default function MyPage() {
  return (
    <Layout
      activeProductId="payments"
      products={products}
      hamburgerMenuItems={hamburgerMenuItems}
      schools={schools}
      selectedSchool={selectedSchool}
      onSchoolChange={handleSchoolChange}
      previewLink={previewLink}
      onHelpClick={handleHelpClick}
      accountMenuItems={accountMenuItems}
      dashboardHref="/dashboard"
    >
      <div className="p-8">
        <h1>Your Page Content</h1>
        <p>Everything is automatically wrapped with header and navigation.</p>
      </div>
    </Layout>
  )
}

// Example 1: "New" badge for newly released features
const menuItemWithNewBadge: HamburgerMenuItem = {
  key: 'plan',
  type: 'link',
  name: 'Plan',
  href: '/cms/plan',
  icon: 'calendar',
  items: [],
  shouldDisplayNewBadge: true  // Shows purple-pink gradient "New" badge
}

// Example 2: "Beta" badge for features in testing
const menuItemWithBetaBadge: HamburgerMenuItem = {
  key: 'forms-builder',
  type: 'link',
  name: 'Forms Builder',
  href: '/cms/forms',
  icon: 'clipboard',
  items: [],
  shouldDisplayBetaBadge: true  // Shows blue pill "Beta" badge
}

// Example 3: Generic numeric badge for notifications
const menuItemWithCountBadge: HamburgerMenuItem = {
  key: 'accessibility',
  type: 'link',
  name: 'Accessibility',
  href: '/cms/accessibility',
  icon: 'universal-access',
  items: [],
  badge: 3  // Shows numeric badge (can also be string)
}

// Example 4: Multiple badges on the same item
const menuItemWithMultipleBadges: HamburgerMenuItem = {
  key: 'supplies',
  type: 'subnav',
  name: 'Supplies',
  href: null,
  icon: 'shopping-cart',
  items: [],
  shouldDisplayNewBadge: true,    // "New" badge
  shouldDisplayBetaBadge: true,   // "Beta" badge
  badge: 5                        // Generic count badge
  // All three badges display simultaneously
}

// Example 5: Navigation with mixed badge types
const hamburgerMenuItems: HamburgerMenuItem[] = [
  {
    key: 'dashboard',
    type: 'link',
    name: 'Dashboard',
    href: '/cms/dashboard',
    icon: 'home',
    items: []
  },
  menuItemWithNewBadge,
  menuItemWithBetaBadge,
  {
    key: 'content',
    type: 'subnav',
    name: 'Content',
    href: null,
    icon: 'file-text',
    items: [
      {
        key: 'pages',
        type: 'link',
        name: 'Pages',
        href: '/cms/pages',
        icon: 'file',
        items: [],
        badge: 12  // Badge on submenu item
      }
    ]
  }
]