59 lines
2.1 KiB
JavaScript
59 lines
2.1 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
TextField,
|
|
Button,
|
|
Box,
|
|
Typography,
|
|
Paper,
|
|
} from "@mui/material";
|
|
|
|
const TicketConfirmationPage = () => {
|
|
// State for form fields
|
|
const [ticketId, setTicketId] = useState("");
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (ticketId) {
|
|
console.log("Registered with:", { ticketId });
|
|
} else {
|
|
alert("Please fill in all fields.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ padding: 3 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}>
|
|
<Typography sx={{ color: 'gray', fontSize: '30px' }}>Ticket Confirmation</Typography>
|
|
</Box>
|
|
<Box sx={{ paddingTop: 2 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}>
|
|
<Typography sx={{ color: 'gray', fontSize: '20px' }}>Confirm Ticket</Typography>
|
|
</Box>
|
|
<Box sx={{ padding: 6 }}>
|
|
<Paper sx={{ width: '100%', overflow: 'hidden' }}>
|
|
<form onSubmit={handleSubmit}>
|
|
<Box mb={2} m={2}>
|
|
<TextField
|
|
label="Ticket ID"
|
|
variant="outlined"
|
|
fullWidth
|
|
value={ticketId}
|
|
onChange={(e) => setTicketId(e.target.value)}
|
|
required
|
|
/>
|
|
</Box>
|
|
|
|
<Box mt={2} mb={2} textAlign="center">
|
|
<Button style={{ marginRight: '5px' }} variant="contained">Reset</Button>
|
|
<Button variant="contained" color="success">Submit</Button>
|
|
</Box>
|
|
</form>
|
|
</Paper>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default TicketConfirmationPage; |