Morph Card

'use client'

import { MorphCard, MorphCardGroup, MorphCardTags, MorphCardStats, Text } from 'biibaos'
import { Star, MapPin } from 'lucide-react'

const team = [
  {
    id: 'alice',
    name: 'Alice Chen',
    role: 'Lead Designer',
    avatar: '🎨',
    color: '#6366f1',
    location: 'San Francisco',
    rating: 4.9,
    skills: ['Figma', 'Motion', 'Brand'],
    bio: "Alice leads product design...",
    projects: 24,
    joined: 'Jan 2021',
  }
]

export default function App() {
  return (
    <MorphCardGroup>
      {team.map(member => (
        <MorphCard
          key={member.id}
          id={member.id}
          collapsedHeight={80}
          icon={member.avatar}
          iconBgColor={member.color + '18'}
          title={
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Text weight="semibold" size="sm">{member.name}</Text>
              <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
                <Star size={10} fill={member.color} color={member.color} />
                <span style={{ fontSize: 11, color: member.color, fontWeight: 600 }}>{member.rating}</span>
              </div>
            </div>
          }
          subtitle={member.role}
          extra={
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <MapPin size={10} style={{ color: 'var(--biiba-text-subtle)' }} />
              <Text size="xs" color="muted">{member.location}</Text>
            </div>
          }
          statusDot={true}
          expandedContent={
            <div style={{ padding: '0 4px 8px' }}>
              <Text size="sm" color="muted" style={{ lineHeight: 1.6, display: 'block', margin: '12px 0' }}>
                {member.bio}
              </Text>
              <MorphCardTags tags={member.skills} color={member.color} />
              <MorphCardStats
                stats={[
                  { label: 'Projects', value: member.projects },
                  { label: 'Rating', value: member.rating },
                  { label: 'Joined', value: member.joined },
                ]}
              />
            </div>
          }
        />
      ))}
    </MorphCardGroup>
  )
}

'use client'

import { MorphCard, MorphCardGroup, MorphCardFeatures, Button, Text } from 'biibaos'
import { Star } from 'lucide-react'

const plans = [
  {
    id: 'pro',
    name: 'Pro',
    price: '$29',
    sub: 'per month',
    icon: <Star size={16} />,
    color: '#f59e0b',
    badge: 'Most Popular',
    features: ['Unlimited projects', 'All components', 'Priority support'],
  }
]

export default function App() {
  return (
    <MorphCardGroup>
      {plans.map(plan => (
        <MorphCard
          key={plan.id}
          id={plan.id}
          collapsedHeight={72}
          icon={plan.icon}
          iconBgColor={plan.color + '18'}
          title={plan.name}
          badge={plan.badge}
          subtitle={`${plan.features.length} features included`}
          extra={
            <div style={{ textAlign: 'right' }}>
              <Text weight="bold" size="sm" style={{ color: plan.color, display: 'block' }}>{plan.price}</Text>
              <Text size="xs" color="muted">{plan.sub}</Text>
            </div>
          }
          style={{
            borderColor: plan.id === 'pro' ? plan.color : undefined,
            boxShadow: plan.id === 'pro' ? `0 8px 30px ${plan.color}15` : undefined,
          }}
          expandedContent={
            <div style={{ padding: '0 4px 8px' }}>
              <MorphCardFeatures features={plan.features} color={plan.color} />
              <Button variant="primary" size="sm" style={{ width: '100%', marginTop: 14 }}>
                Get {plan.name}
              </Button>
            </div>
          }
        />
      ))}
    </MorphCardGroup>
  )
}