Card

'use client'

import React from 'react'
import { Card, CardHeader, CardBody, CardFooter, Text, Button } from 'biibaos'

export default function App() {
  return (
    <Card variant="outlined" style={{ maxWidth: 400 }}>
      <CardHeader 
        title="Account Update" 
        subtitle="Manage your billing and subscription" 
      />
      <CardBody>
        <Text weight="bold" style={{ fontSize: 32 }}>
          $29<span style={{ fontSize: 14, color: 'var(--biiba-text-muted)' }}> /mo</span>
        </Text>
        <Text size="sm" color="muted" style={{ marginTop: 6 }}>
          Next billing date: June 1, 2026
        </Text>
      </CardBody>
      <CardFooter align="between">
        <Button variant="ghost" size="sm">Cancel</Button>
        <Button variant="secondary" size="sm">Upgrade Plan</Button>
      </CardFooter>
    </Card>
  )
}

'use client'

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

const integrations = [
  { name: 'Payments', icon: CreditCard, bg: '#635BFF' },
  { name: 'Email', icon: Mail, bg: '#F06B00' },
  { name: 'CDN', icon: Globe, bg: '#0EA5E9' },
]

export default function IntegrationPicker() {
  return (
    <Grid columns={{ xs: 1, sm: 3 }} gap={12}>
      {integrations.map(({ name, icon: I, bg }) => (
        <Card key={name} interactive variant="outlined" onClick={() => console.log(name)}>
          <CardBody style={{ padding: 20, textAlign: 'center' }}>
            <div style={{ 
              width: 44, height: 44, borderRadius: 12, background: bg, 
              color: '#fff', display: 'flex', alignItems: 'center', 
              justifyContent: 'center', margin: '0 auto 12px' 
            }}>
              <Icon icon={I} size={20} />
            </div>
            <Text weight="semibold" size="sm">{name}</Text>
          </CardBody>
        </Card>
      ))}
    </Grid>
  )
}

'use client'

import React from 'react'
import { Card, CardBody, Badge, Avatar, Stack, Text } from 'biibaos'

export default function ArticleCard() {
  return (
    <Card noPadding variant="elevated" style={{ maxWidth: 360 }}>
      <div style={{ height: 180 }}>
        <img 
          src="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1200&auto=format&fit=crop" 
          alt="Article" 
          style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
        />
      </div>
      <CardBody style={{ padding: 24 }}>
        <Badge variant="primary" pill style={{ marginBottom: 12 }}>Design Systems</Badge>
        <Text variant="h5" weight="bold" style={{ marginBottom: 8 }}>Building Interfaces That Scale</Text>
        <Text variant="body-sm" color="muted" style={{ marginBottom: 16 }}>
          How adaptive motion and intelligent defaults create experiences users love.
        </Text>
        <Stack direction="row" align="center" gap={8}>
          <Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=28&h=28&q=80&fit=crop" size="xs" />
          <Text variant="caption" weight="medium">Alex Chen</Text>
          <Text variant="caption" color="muted" style={{ marginLeft: 'auto' }}>5 min read</Text>
        </Stack>
      </CardBody>
    </Card>
  )
}