import { AppShell, AppPageShell } from '@tidbcloud/uikit/biz'

import { AppShell, AppPageShell } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <AppShell
      navbar={{
        logo: <img src="/logo.svg" alt="Logo" />
      }}
    >
      <AppShell.NavMenuPortal>
        <AppShell.NavItem label="Dashboard" href="/dashboard" />
        <AppShell.NavItem label="Settings" href="/settings" />
      </AppShell.NavMenuPortal>
 
      <AppPageShell title="Dashboard">
        <p>Page content here</p>
      </AppPageShell>
    </AppShell>
  )
}

import { AppShell, AppPageShell } from '@tidbcloud/uikit/biz'
import { Alert } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <AppShell
      banner={<Alert color="blue">New features available!</Alert>}
      navbar={{
        logo: <img src="/logo.svg" alt="Logo" />
      }}
    >
      <AppPageShell title="Home">Content</AppPageShell>
    </AppShell>
  )
}

import { AppShell } from '@tidbcloud/uikit/biz'
import { IconHome, IconSettings } from '@tabler/icons-react'
 
function Demo() {
  return (
    <AppShell navbar={{ logo: <Logo /> }}>
      <AppShell.NavMenuPortal>
        <AppShell.NavItem label="Dashboard" href="/dashboard" leftSection={<IconHome size={16} />} />
        <AppShell.NavItem label="Settings" href="/settings" leftSection={<IconSettings size={16} />}>
          <AppShell.NavSubItem label="General" href="/settings/general" />
          <AppShell.NavSubItem label="Security" href="/settings/security" />
        </AppShell.NavItem>
      </AppShell.NavMenuPortal>
 
      <AppShell.NavFooterPortal>
        <AppShell.NavFooterItem label="Help" href="/help" />
      </AppShell.NavFooterPortal>
    </AppShell>
  )
}

import { AppShell } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <AppShell
      navbar={{
        logo: <Logo />,
        onCollapse: () => console.log('Navbar collapsed'),
        onExpand: () => console.log('Navbar expanded')
      }}
    >
      {/* content */}
    </AppShell>
  )
}

import { AppPageShell } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <AppPageShell title="Page Title">
      <p>Page content goes here</p>
    </AppPageShell>
  )
}

import { AppPageShell } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <AppPageShell title="Details" showBack onBack={() => window.history.back()}>
      <p>Detail content</p>
    </AppPageShell>
  )
}

import { AppPageShell } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <AppPageShell title="Long Page" stickyHeader>
      {/* Long scrollable content */}
    </AppPageShell>
  )
}