Astryx Button

'use client';

import Button from '@/components/ui/astryx-button';
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';

const SIZES = [
  {size: 'sm' as const, label: 'Small'},
  {size: 'md' as const, label: 'Medium'},
  {size: 'lg' as const, label: 'Large'},
];

export default function ButtonSizeVariants() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={4}>
          <Stack direction="vertical" gap={1}>
            <Text type="supporting" color="secondary">
              Primary
            </Text>
            <Stack direction="horizontal" gap={3} vAlign="center">
              {SIZES.map(({size, label}) => (
                <Button key={size} label={label} variant="primary" size={size} />
              ))}
            </Stack>
          </Stack>
          <Stack direction="vertical" gap={1}>
            <Text type="supporting" color="secondary">
              Secondary
            </Text>
            <Stack direction="horizontal" gap={3} vAlign="center">
              {SIZES.map(({size, label}) => (
                <Button
                  key={size}
                  label={label}
                  variant="secondary"
                  size={size}
                />
              ))}
            </Stack>
          </Stack>
        </Stack>
      </div>
    </Theme>
  );
}