Astryx App Shell

'use client';

import AppShell from '@/components/ui/astryx-app-shell';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Banner} from '@astryxdesign/core/Banner';
import {VStack} from '@astryxdesign/core/Stack';
import {Heading, Text} from '@astryxdesign/core/Text';
import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
import {NavIcon} from '@astryxdesign/core/NavIcon';
import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
import {
  ChartBarIcon,
  FolderIcon,
  UsersIcon,
  Cog6ToothIcon,
} from '@heroicons/react/24/outline';
import {HomeIcon} from '@heroicons/react/24/solid';
import {CubeIcon} from '@heroicons/react/24/outline';

export default function AppShellWithBanner() {
  return (
    <Theme theme={neutralTheme}>
      <div style={{height: '100dvh', width: '100%'}}>
        <AppShell
          contentPadding={6}
          style={{height: '100%', minHeight: 0}}
          topNav={
            <TopNav
              label="Main navigation"
              heading={
                <TopNavHeading
                  heading="App Shell"
                  logo={
                    <NavIcon
                      icon={<CubeIcon style={{width: 16, height: 16}} />}
                    />
                  }
                />
              }
              startContent={
                <>
                  <TopNavItem label="Home" href="#" isSelected />
                  <TopNavItem label="Products" href="#" />
                  <TopNavItem label="Docs" href="#" />
                </>
              }
            />
          }
          sideNav={
            <SideNav>
              <SideNavSection title="Main" isHeaderHidden>
                <SideNavItem
                  label="Dashboard"
                  icon={HomeIcon}
                  isSelected
                  href="#"
                />
                <SideNavItem label="Analytics" icon={ChartBarIcon} href="#" />
                <SideNavItem label="Projects" icon={FolderIcon} href="#" />
              </SideNavSection>
              <SideNavSection title="Organization">
                <SideNavItem label="Team" icon={UsersIcon} href="#" />
                <SideNavItem label="Settings" icon={Cog6ToothIcon} href="#" />
              </SideNavSection>
            </SideNav>
          }
          banner={
            <Banner
              status="info"
              container="section"
              title="System maintenance scheduled"
              description="The system will undergo maintenance tonight at 10pm UTC."
              isDismissable
            />
          }>
          <VStack gap={4}>
            <Heading level={3}>Page Content</Heading>
            <Text type="body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris.
            </Text>
          </VStack>
        </AppShell>
      </div>
    </Theme>
  );
}