Banner

import { Banner, BannerTitle, BannerDescription, BannerActions, BannerAction } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Banner status="success" dismissible>
        <BannerTitle>Your changes are saved</BannerTitle>
        <BannerDescription>Everyone in the workspace can see the latest version.</BannerDescription>
        <BannerActions>
          <BannerAction variant="primary">Open the docs</BannerAction>
          <BannerAction>Add more</BannerAction>
        </BannerActions>
      </Banner>
    </>
  )
}

import { Banner, BannerTitle } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Banner status="info"><BannerTitle>Info</BannerTitle></Banner>
      <Banner status="info" contrast="high"><BannerTitle>Info</BannerTitle></Banner>
    </>
  )
}

import { Banner, BannerTitle, BannerActions, BannerAction } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Banner status="info">
        <BannerTitle>Enjoying Reflow?</BannerTitle>
        <BannerActions>
          <BannerAction variant="primary">Star on GitHub</BannerAction>
          <BannerAction>Share</BannerAction>
          <BannerAction variant="ghost">Later</BannerAction>
        </BannerActions>
      </Banner>
    </>
  )
}

import { Banner, BannerTitle, BannerActions, BannerAction } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  return () => (
    <>
      <Banner variant="fixed" status="warning" dismissible>
        <BannerTitle>Registry maintenance tonight at 22:00 UTC</BannerTitle>
        <BannerActions><BannerAction>Details</BannerAction></BannerActions>
      </Banner>
    </>
  )
}

import { Banner, Icon, BannerTitle } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  const icon = <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6h16M4 12h16M4 18h16" /></svg>

  return () => (
    <>
      <Banner icon={<Icon name="bell" />}>
        <BannerTitle>3 new components since your last visit</BannerTitle>
      </Banner>
    </>
  )
}