semantic-ui-react

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import { Button, Form, Segment, Grid, Message } from 'semantic-ui-react'; import 'semantic-ui-css/semantic.min.css'; // Don't forget to include Semantic UI CSS! function App() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [submitted, setSubmitted] = useState(false); const handleSubmit = () => { setSubmitted(true); console.log({ name, email }); // In a real app, you would send this data to a server }; return ( <Grid centered columns={2} style={{ marginTop: '5em' }}> <Grid.Column> <Segment> <Message attached header='Welcome to our site!' content='Fill out the form below to sign-up for a new account' /> <Form className='attached fluid segment' onSubmit={handleSubmit}> <Form.Input label='Name' placeholder='First Name' value={name} onChange={(e) => setName(e.target.value)} required /> <Form.Input label='Email' placeholder='example@domain.com' type='email' value={email} onChange={(e) => setEmail(e.target.value)} required /> <Button primary type='submit'>Submit</Button> </Form> {submitted && ( <Message success> <Message.Header>Form Submitted</Message.Header> <p>Name: {name}, Email: {email}</p> </Message> )} </Segment> </Grid.Column> </Grid> ); } const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(<App />);