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';
import {Text} from '@astryxdesign/core/Text';

export default function BadgeCategoryTags() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={6}>
          <Stack direction="vertical" gap={2}>
            <Text type="supporting" color="secondary">
              Teams
            </Text>
            <Stack direction="horizontal" gap={2} style={{flexWrap: 'wrap'}}>
              <Badge variant="blue" label="Design" />
              <Badge variant="cyan" label="DevOps" />
              <Badge variant="green" label="Backend" />
              <Badge variant="pink" label="Marketing" />
              <Badge variant="purple" label="Engineering" />
              <Badge variant="teal" label="Research" />
            </Stack>
          </Stack>
          <Stack direction="vertical" gap={2}>
            <Text type="supporting" color="secondary">
              Priority
            </Text>
            <Stack direction="horizontal" gap={2}>
              <Badge variant="orange" label="Urgent" />
              <Badge variant="red" label="Critical" />
              <Badge variant="yellow" label="Review" />
            </Stack>
          </Stack>
        </Stack>
      </div>
    </Theme>
  );
}