Astryx Badge

'use client';

import Badge from '@/components/ui/astryx-badge';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';

export default function BadgeShowcase() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={4} hAlign="center">
          <Stack direction="horizontal" gap={2}>
            <Badge label="Neutral" variant="neutral" />
            <Badge label="Info" variant="info" />
            <Badge label="Success" variant="success" />
            <Badge label="Warning" variant="warning" />
            <Badge label="Error" variant="error" />
          </Stack>
          <Stack direction="horizontal" gap={2}>
            <Badge label="Blue" variant="blue" />
            <Badge label="Purple" variant="purple" />
            <Badge label="Pink" variant="pink" />
            <Badge label="Teal" variant="teal" />
            <Badge label="Orange" variant="orange" />
          </Stack>
        </Stack>
      </div>
    </Theme>
  );
}