Badge

import { Badge } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  let color = '#6B97FF'
  const setColor = (value: string) => { color = value; handle.update() }

  return () => (
    <>
      <Badge color="violet">Fiction</Badge>
      <Badge color="amber">Science</Badge>
      <Badge color="green">Philosophy</Badge>
      <Badge color="blue">History</Badge>
      <Badge color="rose">Poetry</Badge>
    </>
  )
}

import { Badge } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  let color = '#6B97FF'
  const setColor = (value: string) => { color = value; handle.update() }

  return () => (
    <>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
        <Badge color="violet">Fiction</Badge>
        <Badge color="amber">Science</Badge>
        <Badge color="green">Philosophy</Badge>
        <Badge color="blue">History</Badge>
        <Badge color="rose">Poetry</Badge>
      </div>
    </>
  )
}

import { Badge } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  let color = '#6B97FF'
  const setColor = (value: string) => { color = value; handle.update() }

  return () => (
    <>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
        <Badge color="violet" variant="dot">Fiction</Badge>
        <Badge color="amber" variant="dot">Science</Badge>
        <Badge color="green" variant="dot">Philosophy</Badge>
        <Badge color="blue" variant="dot">History</Badge>
        <Badge color="rose" variant="dot">Poetry</Badge>
      </div>
    </>
  )
}

import { Badge } from '@rtzll/reflow'
import { type Handle } from 'remix/component'

export function Example(handle: Handle) {
  let color = '#6B97FF'
  const setColor = (value: string) => { color = value; handle.update() }

  return () => (
    <>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
        <Badge color="accent">Accent</Badge>
        <Badge color="gray">Gray</Badge>
        <Badge color="red">Red</Badge>
        <Badge color="orange">Orange</Badge>
        <Badge color="amber">Amber</Badge>
        <Badge color="yellow">Yellow</Badge>
        <Badge color="lime">Lime</Badge>
        <Badge color="green">Green</Badge>
        <Badge color="emerald">Emerald</Badge>
        <Badge color="teal">Teal</Badge>
        <Badge color="cyan">Cyan</Badge>
        <Badge color="blue">Blue</Badge>
        <Badge color="indigo">Indigo</Badge>
        <Badge color="violet">Violet</Badge>
        <Badge color="purple">Purple</Badge>
        <Badge color="fuchsia">Fuchsia</Badge>
        <Badge color="pink">Pink</Badge>
        <Badge color="rose">Rose</Badge>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
        <Badge color="accent" variant="dot">Accent</Badge>
        <Badge color="gray" variant="dot">Gray</Badge>
        <Badge color="red" variant="dot">Red</Badge>
        <Badge color="orange" variant="dot">Orange</Badge>
        <Badge color="amber" variant="dot">Amber</Badge>
        <Badge color="yellow" variant="dot">Yellow</Badge>
        <Badge color="lime" variant="dot">Lime</Badge>
        <Badge color="green" variant="dot">Green</Badge>
        <Badge color="emerald" variant="dot">Emerald</Badge>
        <Badge color="teal" variant="dot">Teal</Badge>
        <Badge color="cyan" variant="dot">Cyan</Badge>
        <Badge color="blue" variant="dot">Blue</Badge>
        <Badge color="indigo" variant="dot">Indigo</Badge>
        <Badge color="violet" variant="dot">Violet</Badge>
        <Badge color="purple" variant="dot">Purple</Badge>
        <Badge color="fuchsia" variant="dot">Fuchsia</Badge>
        <Badge color="pink" variant="dot">Pink</Badge>
        <Badge color="rose" variant="dot">Rose</Badge>
      </div>
    </>
  )
}