import React, { useMemo, useState } from 'react'; function isEmail(x) { return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(x); } export default function App() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [age, setAge] = useState(''); const isValid = useMemo(() => { const n = Number(age); return name.trim().length >= 2 && isEmail(email) && !Number.isNaN(n) && n >= 10 && n <= 90; }, [name, email, age]); function submit(e) { e.preventDefault(); if (!isValid) return; alert('Profile saved on meetcode'); } return ( <div style={{ padding: 16, width: 560 }}> <h2 style={{ marginTop: 0 }}>Profile</h2> <form onSubmit={submit} style={{ display: 'grid', gap: 10 }}> <input value={name} onChange={(e) => setName(e.target.value)} placeholder='Name (min 2)' style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} /> <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder='Email' style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} /> <input value={age} onChange={(e) => setAge(e.target.value.replace(/\\D/g, ''))} inputMode='numeric' placeholder='Age (10-90)' style={{ padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} /> <button type='submit' disabled={!isValid} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff', opacity: isValid ? 1 : 0.6 }}>Save</button> </form> <div style={{ marginTop: 10, color: '#555' }}>Valid: {isValid ? 'Yes' : 'No'}</div> </div> ); }