Toast

import React from 'react';
import Toast from './components/Toast';
import Button from './components/Button';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <Button onClick={() => Toast.show({ 
        title: props.title || 'Toast Notification', 
        description: props.description || 'This is a toast message.', 
        variant: props.variant || 'info' 
      })}>
        Show Toast
      </Button>
      <Toast.Container />
    </div>
  );
}

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>Toast - Advanced Patterns</h3>
      <p>Advanced usage patterns for Toast 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>
  );
}