Top bar ​

<script lang="ts" setup>
import {
  ActionList,
  ActionListBody,
  ActionListItem,
  ActionListSection,
  ActionListTrigger,
  Button,
  ButtonBadge,
  ButtonContent,
  Heading,
  TextStyle,
  TopBar,
  TopBarLogo,
  TopBarNavigation,
  TopBarSearch,
} from '@returnless/focus-ui';
</script>

<template>
  <TopBar>
    <TopBarLogo />
    <TopBarNavigation>
      <Button variant="ghost">Item 1</Button>
      <Button variant="ghost">
        <ButtonContent>Item 2</ButtonContent>
        <ButtonBadge color="slate">100</ButtonBadge>
      </Button>
      <ActionList alignment="start">
        <ActionListTrigger>
          <Button variant="ghost" disclosure>Item 3</Button>
        </ActionListTrigger>
        <ActionListBody>
          <div class="grid grid-cols-2 gap-2 p-2">
            <a href="#" class="block hover:bg-slate-100 px-4 py-3 rounded space-y-2" v-for="n in 3">
              <Heading size="lg">Item </Heading>
              <TextStyle subdued>Manage statuses, languages, countries, currencies, etc.</TextStyle>
            </a>
          </div>
          <div class="grid grid-cols-2 gap-2 p-2 bg-slate-50 border-t">
            <a href="#" class="block hover:bg-slate-100 px-4 py-3 rounded space-y-2" v-for="n in 2">
              <Heading size="lg">Item </Heading>
              <TextStyle subdued>Manage statuses, languages, countries, currencies, etc.</TextStyle>
            </a>
          </div>
        </ActionListBody>
      </ActionList>
    </TopBarNavigation>
    <TopBarSearch />
    <ActionList alignment="end">
      <ActionListTrigger>
        <Button
          disclosure
          variant="ghost"
        >
          <ButtonContent>
            Demo
          </ButtonContent>
        </Button>
      </ActionListTrigger>
      <ActionListBody>
        <div class="bg-slate-100 border-b px-4 py-2">
          <TextStyle strong>My account</TextStyle>
          <p>demo@app.com</p>
          <p>Returnless</p>
        </div>
        <ActionListSection label="Bulk actions">
          <ActionListItem href="#">
            My account
          </ActionListItem>
          <ActionListItem
            href="#"
            variant="destructive"
          >
            Sign out
          </ActionListItem>
        </ActionListSection>
      </ActionListBody>
    </ActionList>
  </TopBar>
</template>