import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
import { Appbar } from "../components/Appbar";
import { Box } from "../components/Box";
import { Button } from "../components/Button";
import { Frame } from "../components/Frame";
import { TopBar } from "../components/TopBar";
import { PRODUCT_ID } from "../types";

<Meta title="Recipes/TopBar Navigation" />

# TopBar Navigation

This story illustrates how the [`TopBar`](/?path=/docs/components-topbar--top-bar) component can be used with the [`Frame`](/?path=/docs/layouts-frame--default) component to layout a page.

## Main Navigation

<Preview>
  <Story name="Main">
    <Frame>
      <Frame.Area name="appbar">
        <Appbar
          currentProduct={PRODUCT_ID.COMPLY}
          nav={
            <Appbar.Tabs>
              {["Assets", "Controls", "Tickets", "Checks"].map((item) => (
                <Appbar.Tab
                  key={item}
                  href={`/${item.toLowerCase()}`}
                  active={false}
                >
                  {item}
                </Appbar.Tab>
              ))}
            </Appbar.Tabs>
          }
        />
      </Frame.Area>
      <Frame.Area name="main">
        <Frame.Area name="topbar">
          <TopBar
            leftSlot={
              <TopBar.SubNav>
                <TopBar.SubNavItem href="/" isActive>
                  Page 1
                </TopBar.SubNavItem>
                <TopBar.SubNavItem href="/">Page 2</TopBar.SubNavItem>
                <TopBar.SubNavItem href="/">Page 3</TopBar.SubNavItem>
              </TopBar.SubNav>
            }
            rightSlot={<Button>Action</Button>}
          />
        </Frame.Area>
        <Frame.Area name="content">
          <Box className="text-gray-800 w-full p-8">Content</Box>
        </Frame.Area>
      </Frame.Area>
    </Frame>
  </Story>
</Preview>

## Detail View

<Preview>
  <Story name="Detail">
    <Frame>
      <Frame.Area name="appbar">
        <Appbar
          currentProduct={PRODUCT_ID.COMPLY}
          nav={
            <Appbar.Tabs>
              {["Assets", "Controls", "Tickets", "Checks"].map((item) => (
                <Appbar.Tab
                  key={item}
                  href={`/${item.toLowerCase()}`}
                  active={false}
                >
                  {item}
                </Appbar.Tab>
              ))}
            </Appbar.Tabs>
          }
        />
      </Frame.Area>
      <Frame.Area name="main">
        <Frame.Area name="topbar">
          <TopBar
            leftSlot={
              <TopBar.Breadcrumbs
                parentLinkTitle="Previous Page Title"
                currentPageTitle="Current Page Title"
                currentPageSubtitle="Current Page Subtitle"
              />
            }
            rightSlot={<Button>Action</Button>}
          />
          <TopBar
            leftSlot={
              <TopBar.SubNav>
                <TopBar.SubNavItem href="/" isActive>
                  SubPage 1
                </TopBar.SubNavItem>
                <TopBar.SubNavItem href="/">SubPage 2</TopBar.SubNavItem>
                <TopBar.SubNavItem href="/">SubPage 3</TopBar.SubNavItem>
              </TopBar.SubNav>
            }
          />
        </Frame.Area>
        <Frame.Area name="content">
          <Box className="text-gray-800 w-full p-8">Content</Box>
        </Frame.Area>
      </Frame.Area>
    </Frame>
  </Story>
</Preview>