PageShell

import { PageShell } from '@mihcm/ui/PageShell';
import { TopBar, TopBarLogo } from '@mihcm/ui/TopBar';
import { MainSidebar } from '@mihcm/ui/MainSidebar';
import { TitleBar } from '@mihcm/ui/TitleBar';
import { StatCard } from '@mihcm/ui/StatCard';
import { Avatar, AvatarFallback, AvatarImage } from '@mihcm/ui/Avatar';
 
<PageShell
  topBar={
    <TopBar
      start={<TopBarLogo />}
      end={
        <Avatar size="sm">
          <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
          <AvatarFallback>YA</AvatarFallback>
        </Avatar>
      }
    />
  }
  sidebar={<MainSidebar items={SIDEBAR_ITEMS} activeKey={active} onItemSelect={setActive} />}
  titleBar={
    <TitleBar icon={<Shield />} supertitle="User Administration" title="Security & Permissions" />
  }
>
  <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
    <StatCard tone="primary" value="6" label="Active Roles" />
    <StatCard tone="accent" value="13,283" label="Total Users" />
    <StatCard tone="success" value="16" label="Modules" />
  </div>
</PageShell>;

<PageShell
  topBar={
    <TopBar
      start={<TopBarLogo />}
      end={
        <Avatar>
          <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
          <AvatarFallback>YA</AvatarFallback>
        </Avatar>
      }
    />
  }
  titleBar={<TitleBar title="Settings" />}
>
  {/* content */}
</PageShell>