Skip to content
This repository has been archived by the owner on Jun 22, 2024. It is now read-only.

Update layout and UI to centralise contents #23

Merged
merged 1 commit into from
Sep 26, 2023
Merged

Update layout and UI to centralise contents #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 44 additions & 42 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const App = () => {

return (
<div className="flex min-h-screen flex-col text-neutral-50">
<div className="prose prose-invert mx-auto flex w-full max-w-6xl grow flex-col justify-center px-4 py-16">
<div className="prose prose-invert mx-auto flex w-full max-w-6xl grow flex-col justify-center px-4 py-16 md:px-8">
<div className="text-center">
<h1>CPF Contribution Calculator</h1>
<h2 className="flex flex-col items-center">
Expand All @@ -57,51 +57,53 @@ const App = () => {
)}
</h2>
</div>
<SelectBox
name="age-group"
id="age-group"
onChange={(e) => setAgeGroup(ageGroups[Number(e.target.value)])}
>
{ageGroups.map(({ description }, index) => {
return (
<option key={index} value={index}>
{description}
</option>
);
})}
</SelectBox>
<SelectBox
name="cpf-income-ceiling"
id="cpf-income-ceiling"
defaultValue={currentYear}
onChange={(e) => setSelectedYear(e.target.value)}
>
{cpfIncomeCeilings.map(({ year }) => {
if (year === "SEPT2023") {
<div className="flex flex-col items-center">
<SelectBox
name="age-group"
id="age-group"
onChange={(e) => setAgeGroup(ageGroups[Number(e.target.value)])}
>
{ageGroups.map(({ description }, index) => {
return (
<option key={year} value={year}>
September 2023
<option key={index} value={index}>
{description}
</option>
);
}
})}
</SelectBox>
<SelectBox
name="cpf-income-ceiling"
id="cpf-income-ceiling"
defaultValue={currentYear}
onChange={(e) => setSelectedYear(e.target.value)}
>
{cpfIncomeCeilings.map(({ year }) => {
if (year === "SEPT2023") {
return (
<option key={year} value={year}>
September 2023
</option>
);
}

return (
<option key={year} value={year}>
January {year}
</option>
);
})}
</SelectBox>
<input
type="number"
inputMode="decimal"
pattern="\d*"
placeholder="Gross Income e.g. 10000"
className="mb-2 w-full rounded-lg p-2 text-neutral-900 md:w-1/3"
onChange={(e) => setGrossIncome(Number(e.target.value))}
/>
<div className="mb-4 italic text-red-300">
This is for illustration purposes only. No data are being stored.
return (
<option key={year} value={year}>
January {year}
</option>
);
})}
</SelectBox>
<input
type="number"
inputMode="decimal"
pattern="\d*"
placeholder="Gross Income e.g. 10000"
className="mb-2 w-full rounded-lg p-2 text-neutral-900 md:w-1/3"
onChange={(e) => setGrossIncome(Number(e.target.value))}
/>
<div className="mb-4 italic text-red-300">
This is for illustration purposes only. No data are being stored.
</div>
</div>
<div className="flex flex-col gap-y-2">
{Boolean(grossIncome) && (
Expand Down
Loading