Banner

<script setup lang="ts">
  import { Banner, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full">
    <Banner tone="neutral">Comments now run on the new system.</Banner>
    <Banner tone="accent">Hina UI 1.2 is out.</Banner>
    <Banner tone="info">You are reading the docs for an older version.</Banner>
    <Banner tone="success">Your email address has been verified.</Banner>
    <Banner tone="warning">The site will be down for maintenance tonight at 02:00.</Banner>
    <Banner tone="danger">Payments are temporarily unavailable. We are on it.</Banner>
    <Banner tone="accent" :icon="false">Hina UI 1.2 is out.</Banner>
  </Stack>
</template>

<script setup lang="ts">
  import { Sparkles } from '@lucide/vue'
  import { Banner } from '@hina-ui/vue'
</script>

<template>
  <Banner>
    <template #icon><Sparkles class="size-4 shrink-0" /></template>
    Anniversary sale: 20% off every book for a limited time.
  </Banner>
</template>

<script setup lang="ts">
  import { Banner, Link } from '@hina-ui/vue'
</script>

<template>
  <Banner tone="info">
    You are reading the docs for 1.x.
    <Link href="#" underline>Go to the latest version</Link>
  </Banner>
</template>

<script setup lang="ts">
  import { Banner, Button } from '@hina-ui/vue'
</script>

<template>
  <Banner tone="warning">
    Your session expires in 5 minutes.
    <template #actions>
      <Button size="sm" tone="neutral">Stay signed in</Button>
    </template>
  </Banner>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Banner, Button, Stack } from '@hina-ui/vue'

  const open = ref(true)
</script>

<template>
  <Stack class="min-h-24 w-full">
    <Banner v-model:open="open" tone="success" closable>
      Your email address has been verified.
    </Banner>
    <Button variant="soft" tone="neutral" :disabled="open" class="self-start" @click="open = true">
      Show again
    </Button>
  </Stack>
</template>

<script setup lang="ts">
  import { Sparkles } from '@lucide/vue'
  import { Banner, Link, type BannerNotice } from '@hina-ui/vue'

  const notices: (BannerNotice & { text: string; link?: string })[] = [
    { text: 'Hina UI 1.2 is out.', link: 'Read the release notes' },
    { text: 'The site will be down for maintenance on 1 March, 02:00 to 04:00.', tone: 'warning' },
    {
      text: 'Anniversary sale: 20% off every book for a limited time.',
      link: 'Learn more',
      icon: Sparkles,
    },
  ]
</script>

<template>
  <Banner :items="notices" closable>
    <template #item="{ item }">
      {{ item.text }}
      <Link v-if="item.link" href="#" underline>{{ item.link }}</Link>
    </template>
  </Banner>
</template>

<script setup lang="ts">
  import { Banner } from '@hina-ui/vue'

  const notices = [
    { text: '86 new reviews this week, 1,204 active readers.' },
    { text: 'The most popular title this week is Spice and Wolf.' },
    { text: 'Shelves can now be filtered by tag.' },
  ]
</script>

<template>
  <Banner :items="notices" :autoplay="4000" tone="info">
    <template #item="{ item }">{{ item.text }}</template>
  </Banner>
</template>

<script setup lang="ts">
  import {
    AppShell,
    Banner,
    Heading,
    Link,
    NavLink,
    Sidebar,
    SidebarTrigger,
    Text,
  } from '@hina-ui/vue'
</script>

<template>
  <AppShell collapsible="hidden" class="border-line h-96 w-full rounded-lg border">
    <template #banner>
      <Banner closable>
        Hina UI 1.2 is out.
        <Link href="#" underline>Read the release notes</Link>
      </Banner>
    </template>

    <template #sidebar>
      <Sidebar>
        <NavLink href="#" active label="Home">Home</NavLink>
        <NavLink href="#" label="My shelf">My shelf</NavLink>
      </Sidebar>
    </template>

    <template #header>
      <SidebarTrigger />
      <Heading :level="2" size="sm">Home</Heading>
    </template>

    <Text size="sm" tone="muted" class="block p-6">
      Close the banner and the sidebar and main area move up to fill the space.
    </Text>
  </AppShell>
</template>