howl/src/grid.tsx

import { define } from 'forge'
import { theme } from './theme'
import { VStack, HStack } from './stack'
import { Button } from './button'
import { Section } from './section'
import { H2, H3 } from './text'

export const Grid = define('Grid', {
  display: 'grid',

  variants: {
    cols: {
      1: { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' },
      2: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
      3: { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' },
      4: { gridTemplateColumns: 'repeat(4, minmax(0, 1fr))' },
      5: { gridTemplateColumns: 'repeat(5, minmax(0, 1fr))' },
      6: { gridTemplateColumns: 'repeat(6, minmax(0, 1fr))' },
      7: { gridTemplateColumns: 'repeat(7, minmax(0, 1fr))' },
    },
    gap: {
      0: { gap: 0 },
      1: { gap: theme('spacing-1') },
      2: { gap: theme('spacing-2') },
      3: { gap: theme('spacing-3') },
      4: { gap: theme('spacing-4') },
      6: { gap: theme('spacing-6') },
      8: { gap: theme('spacing-8') },
      12: { gap: theme('spacing-12') },
    },
    v: {
      start: { alignItems: 'start' },
      center: { alignItems: 'center' },
      end: { alignItems: 'end' },
      stretch: { alignItems: 'stretch' },
    },
    h: {
      start: { justifyItems: 'start' },
      center: { justifyItems: 'center' },
      end: { justifyItems: 'end' },
      stretch: { justifyItems: 'stretch' },
    },
  },
})

export const Test = () => {
  return (
    <Section gap={4} style={{ padding: '16px' }}>
      <VStack gap={6}>
        <H2>Grid Examples</H2>

        {/* Simple 3-column grid */}
        <VStack gap={2}>
          <H3>Simple 3 columns: cols={3}</H3>
          <Grid cols={3} gap={4}>
            <div style={{ backgroundColor: '#fecaca', padding: '16px', textAlign: 'center' }}>Item 1</div>
            <div style={{ backgroundColor: '#bbf7d0', padding: '16px', textAlign: 'center' }}>Item 2</div>
            <div style={{ backgroundColor: '#bfdbfe', padding: '16px', textAlign: 'center' }}>Item 3</div>
            <div style={{ backgroundColor: '#fef08a', padding: '16px', textAlign: 'center' }}>Item 4</div>
            <div style={{ backgroundColor: '#e9d5ff', padding: '16px', textAlign: 'center' }}>Item 5</div>
            <div style={{ backgroundColor: '#fbcfe8', padding: '16px', textAlign: 'center' }}>Item 6</div>
          </Grid>
        </VStack>

        {/* 4-column grid */}
        <VStack gap={2}>
          <H3>4 columns: cols={4}</H3>
          <Grid cols={4} gap={4}>
            <div style={{ backgroundColor: '#fecaca', padding: '16px', textAlign: 'center' }}>Card 1</div>
            <div style={{ backgroundColor: '#bbf7d0', padding: '16px', textAlign: 'center' }}>Card 2</div>
            <div style={{ backgroundColor: '#bfdbfe', padding: '16px', textAlign: 'center' }}>Card 3</div>
            <div style={{ backgroundColor: '#fef08a', padding: '16px', textAlign: 'center' }}>Card 4</div>
          </Grid>
        </VStack>

        {/* Payment method example */}
        <VStack gap={2}>
          <H3>Payment buttons example</H3>
          <Grid cols={3} gap={4}>
            <Button variant="outline" style={{ height: '80px', flexDirection: 'column' }}>
              <div style={{ fontSize: '24px' }}>💳</div>
              <span style={{ fontSize: '12px' }}>Card</span>
            </Button>
            <Button variant="outline" style={{ height: '80px', flexDirection: 'column' }}>
              <div style={{ fontSize: '24px' }}>🍎</div>
              <span style={{ fontSize: '12px' }}>Apple</span>
            </Button>
            <Button variant="outline" style={{ height: '80px', flexDirection: 'column' }}>
              <div style={{ fontSize: '24px' }}>💰</div>
              <span style={{ fontSize: '12px' }}>PayPal</span>
            </Button>
          </Grid>
        </VStack>

        {/* Alignment examples */}
        <VStack gap={2}>
          <H3>Alignment: v="center" h="center"</H3>
          <Grid cols={3} gap={4} v="center" h="center" style={{ height: '128px', backgroundColor: '#f3f4f6' }}>
            <div style={{ backgroundColor: '#fecaca', padding: '8px' }}>Item 1</div>
            <div style={{ backgroundColor: '#bbf7d0', padding: '8px' }}>Item 2</div>
            <div style={{ backgroundColor: '#bfdbfe', padding: '8px' }}>Item 3</div>
          </Grid>
        </VStack>

        <VStack gap={2}>
          <H3>Alignment: v="start" h="end"</H3>
          <Grid cols={2} gap={4} v="start" h="end" style={{ height: '96px', backgroundColor: '#f3f4f6' }}>
            <div style={{ backgroundColor: '#e9d5ff', padding: '8px' }}>Left</div>
            <div style={{ backgroundColor: '#fed7aa', padding: '8px' }}>Right</div>
          </Grid>
        </VStack>
      </VStack>
    </Section>
  )
}