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>
<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">
<table>
<tbody>
{Object.entries(formData).map(([key, value]) => (
<tr className="form-data-row" id={key}>
<td className="form-data-key">{key}</td>
<td className="form-data-value">{value}</td>
</tr>
))}
</tbody>
</table>
</div>
{Object.entries(formData).map(([key, value]) => (
<div>
<p><strong>{key}</strong></p>
{
value
.split("\n")
.filter(str => str.trim() !== "")
.map((str, index) => <p style={{ wordWrap: 'break-word' }}>{str}</p>)
}
</div>
))}
</div>
);
</div>
)
;
}