Refactor email verification UI to enhance data display

Replaced table with div and paragraph elements to improve readability of user-submitted data. Added logic to handle multiline form data and remove empty lines, ensuring cleaner and more user-friendly presentation.
This commit is contained in:
Teriuihi 2024-08-11 18:47:19 +02:00
parent ceaca60ece
commit 821e63953b

View File

@ -26,19 +26,21 @@ const ThankYou: FC = () => {
</Helmet> </Helmet>
<header className="header">Thank you for completing the form and verifying your email!<br></br>This is the data you entered:</header> <header className="header">Thank you for completing the form and verifying your email!<br></br>This is the data you entered:</header>
<div className="fields"> <div className="fields">
<table>
<tbody>
{Object.entries(formData).map(([key, value]) => ( {Object.entries(formData).map(([key, value]) => (
<tr className="form-data-row" id={key}> <div>
<td className="form-data-key">{key}</td> <p><strong>{key}</strong></p>
<td className="form-data-value">{value}</td> {
</tr> value
.split("\n")
.filter(str => str.trim() !== "")
.map((str, index) => <p style={{ wordWrap: 'break-word' }}>{str}</p>)
}
</div>
))} ))}
</tbody>
</table>
</div> </div>
</div> </div>
); )
;
} }