Grid

'use client'

import React from 'react'
import { Grid, Card, Text } from 'biibaos'

export default function App() {
  return (
    <Grid columns={{ xs: 1, sm: 2, md: 3 }} gap={16}>
      {[1, 2, 3, 4, 5, 6].map(i => (
        <Card key={i} variant="outlined" style={{ height: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Text weight="bold" color="muted">0{i}</Text>
        </Card>
      ))}
    </Grid>
  )
}

'use client'

import React from 'react'
import { Grid, View, Text } from 'biibaos'

export default function App() {
  return (
    <Grid columns={{ xs: 1, sm: 2, lg: 4 }} gap={16}>
      {[1, 2, 3, 4].map(i => (
        <View key={i} p={20} bg="surface" border radius="lg" shadow="sm">
          <Text weight="semibold">Column {i}</Text>
          <Text size="sm" color="muted">Adapts to viewport width.</Text>
        </View>
      ))}
    </Grid>
  )
}

'use client'

import React from 'react'
import { Grid, Card, Text, CardBody, Icon } from 'biibaos'
import { Zap } from 'lucide-react'

export default function BentoLayout() {
  return (
    <Grid columns={{ xs: 1, md: 3 }} gap={12}>
      {/* Span 2 columns */}
      <Card style={{ gridColumn: 'span 2', background: 'var(--biiba-surface-raised)' }}>
        <CardBody style={{ height: 200 }}>
          <Text variant="h4" weight="bold">Main Feature</Text>
          <Text variant="body-sm" color="muted">A large highlight area.</Text>
        </CardBody>
      </Card>

      {/* Single column - Primary theme */}
      <Card style={{ background: 'var(--biiba-primary)', color: 'white' }}>
        <CardBody style={{ height: 200, justifyContent: 'center', alignItems: 'center', display: 'flex' }}>
          <Icon icon={Zap} size={48} />
        </CardBody>
      </Card>

      {/* Small metric */}
      <Card style={{ background: 'var(--biiba-surface-raised)' }}>
        <CardBody style={{ height: 120 }}>
          <Text weight="bold">Metric 1</Text>
          <Text variant="h2">84%</Text>
        </CardBody>
      </Card>

      {/* Bottom long card */}
      <Card style={{ gridColumn: 'span 2', background: 'var(--biiba-surface-raised)' }}>
        <CardBody style={{ height: 120 }}>
          <Text weight="bold">Secondary Area</Text>
        </CardBody>
      </Card>
    </Grid>
  )
}