NameInputModal.jsx

import React, { useState } from 'react';

export default function NameInputModal({ open, onSubmit }) {
  const [name, setName] = useState('');
  if (!open) return null;
  return (
    <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(36,36,36,0.4)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px #8888', padding: 32, minWidth: 320, maxWidth: 400, width: '100%', position: 'relative' }}>
        <h2 style={{ fontWeight: 700, fontSize: '1.2rem', marginBottom: 16 }}>Enter your name</h2>
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
          placeholder="Your name"
          style={{ width: '100%', padding: '12px', borderRadius: 8, border: '1px solid #d1d5db', fontSize: '1rem', marginBottom: 24 }}
        />
        <button onClick={() => onSubmit(name)} style={{ background: '#646cff', color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontWeight: 500, fontSize: '1rem' }}>Submit</button>
      </div>
    </div>
  );
}