← back to Watches

src/main-simple.jsx

76 lines

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

function SimpleApp() {
  const [watches, setWatches] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetch('/api/watches')
      .then(res => res.json())
      .then(data => {
        setWatches(data);
        setLoading(false);
      })
      .catch(err => {
        console.error('Error loading watches:', err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <div style={{ padding: '40px', textAlign: 'center', fontFamily: 'sans-serif' }}>
        <h1>⌚ Omega Watch Price History</h1>
        <p>Loading watches...</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '40px', fontFamily: 'sans-serif', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ color: '#C41E3A', fontSize: '2.5rem' }}>⌚ Omega Watch Price History</h1>
      <p style={{ fontSize: '1.2rem', color: '#666' }}>
        Tracking historical prices for {watches.length} iconic Omega watches
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '20px', marginTop: '30px' }}>
        {watches.map(watch => (
          <div key={watch.id} style={{
            border: '1px solid #ddd',
            borderRadius: '8px',
            padding: '20px',
            backgroundColor: '#fff',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
          }}>
            <h3 style={{ color: '#333', marginBottom: '10px' }}>{watch.model}</h3>
            <p style={{ color: '#666', marginBottom: '5px' }}>
              <strong>Series:</strong> {watch.series}
            </p>
            <p style={{ color: '#666', marginBottom: '5px' }}>
              <strong>Year:</strong> {watch.yearIntroduced}
            </p>
            <p style={{ color: '#666', fontSize: '0.9rem' }}>
              {watch.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

console.log('🚀 Initializing React App...');
const root = document.getElementById('root');
if (root) {
  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <SimpleApp />
    </React.StrictMode>
  );
  console.log('✅ React App Mounted!');
} else {
  console.error('❌ Root element not found!');
}