Stack

'use client'

import React from 'react'
import { Stack, Button } from 'biibaos'

export default function App() {
  return (
    <Stack direction="row" gap="md" align="center">
      <Button>Action A</Button>
      <Button variant="secondary">Action B</Button>
      <Button variant="ghost">Action C</Button>
    </Stack>
  )
}

'use client'

import React from 'react'
import { Stack, Icon, Text, Badge } from 'biibaos'
import { Zap } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="column" gap={16} fullWidth>
      {/* Item with centered content */}
      <Stack align="center" gap={12} style={{ padding: 16, background: 'var(--biiba-surface-raised)', borderRadius: 12, border: '1px solid var(--biiba-border)' }}>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--biiba-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white' }}>
          <Icon icon={Zap} size={20} />
        </div>
        <Stack direction="column" gap={2}>
          <Text weight="bold">Centered Alignment</Text>
          <Text variant="caption" color="muted">Perfect for list items</Text>
        </Stack>
      </Stack>
      
      {/* Item with space-between distribution */}
      <Stack justify="between" align="center" style={{ padding: 16, background: 'var(--biiba-surface-raised)', borderRadius: 12, border: '1px solid var(--biiba-border)' }}>
        <Text weight="semibold">Notification Status</Text>
        <Badge variant="success" pill>Enabled</Badge>
      </Stack>
    </Stack>
  )
}

'use client'

import React from 'react'
import { Stack, Icon, Text, Button } from 'biibaos'
import { Zap } from 'lucide-react'

export default function App() {
  return (
    <div style={{ padding: 24, background: 'var(--biiba-surface-raised)', borderRadius: 24, border: '1px solid var(--biiba-border)' }}>
      <Stack direction={{ xs: 'column', md: 'row' }} gap={32} align="center">
        {/* Media area */}
        <div style={{ 
          width: '100%', maxWidth: 240, height: 160, borderRadius: 16, 
          background: 'linear-gradient(135deg, var(--biiba-primary) 0%, var(--biiba-secondary) 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', flexShrink: 0
        }}>
          <Icon icon={Zap} size={48} />
        </div>

        {/* Content area */}
        <Stack direction="column" gap={16} style={{ flex: 1 }}>
          <Stack direction="column" gap={4}>
            <Text variant="h3" weight="bold">Adaptive Media Object</Text>
            <Text variant="body" color="muted">
              This Stack is a column on mobile and a row on desktop.
            </Text>
          </Stack>
          <Stack direction="row" gap={12}>
            <Button variant="primary" size="sm">Try it out</Button>
            <Button variant="ghost" size="sm">Documentation</Button>
          </Stack>
        </Stack>
      </Stack>
    </div>
  )
}