Badge

import React from 'react';
import Badge from './components/Badge';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Badge
        variant={props.variant || 'default'}
        size={props.size || 'medium'}
        count={props.count}
        max={props.max}
        dot={props.dot}
      >
        {props.children || 'Badge'}
      </Badge>
    </div>
  );
}

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Badge - Advanced Patterns</h3>
      <p>Advanced usage patterns for Badge include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}