Add form

components/FormExample/FormExample.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@ag.ds-next/react/button';
+import { FormStack } from '@ag.ds-next/react/form-stack';
+import { H2 } from '@ag.ds-next/react/heading';
+import { Select } from '@ag.ds-next/react/select';
+import { Stack } from '@ag.ds-next/react/stack';
+import { findPopulation } from '../../lib/actions';
+import { STATES } from '../../lib/constants';
+
+export const FormExample = () => {
+	return (
+		<Stack paddingTop={2} gap={1}>
+			<H2 id="form-heading">Find a population</H2>
+
+			<form action={findPopulation} aria-labelledby="form-heading">
+				<FormStack>
+					<Select
+						label="State"
+						name="state"
+						options={STATES}
+						placeholder="Please select"
+					/>
+
+					<Button alignSelf="start" loadingLabel="Finding" type="submit">
+						Find population
+					</Button>
+				</FormStack>
+			</form>
+		</Stack>
+	);
+};

components/HomePageContent/HomePageContent.tsx

@@ -1,4 +1,5 @@
 import { Prose } from '@ag.ds-next/react/prose';
+import { FormExample } from '../FormExample/FormExample';
 
 export const HomePageContent = () => {
 	return (
@@ -15,6 +16,8 @@ export const HomePageContent = () => {
 				</a>
 				.
 			</p>
+
+			<FormExample />
 		</Prose>
 	);
 };

lib/actions.ts

@@ -0,0 +1,15 @@
+'use server';
+
+import { statesData } from './constants';
+
+export async function findPopulation(formData: FormData) {
+	const rawFormData = {
+		state: formData.get('state'),
+	};
+
+	const population = statesData.find(
+		(state) => state.id === rawFormData.state
+	)?.population;
+
+	return `${population}`;
+}

lib/constants.ts

@@ -0,0 +1,69 @@
+export const STATES = [
+	{ label: 'Australian Capital Territory', value: 'act' },
+	{ label: 'New South Wales', value: 'nsw' },
+	{ label: 'Northern Territory', value: 'nt' },
+	{ label: 'Queensland', value: 'qld' },
+	{ label: 'South Australia', value: 'sa' },
+	{ label: 'Tasmania', value: 'tas' },
+	{ label: 'Victoria', value: 'vic' },
+	{ label: 'Western Australia', value: 'wa' },
+];
+
+export const statesData = [
+	{
+		id: 'nsw',
+		location: 'New South Wales',
+		population: 7670700,
+		growthYear: 3.1,
+		growthDecade: 12.9,
+	},
+	{
+		id: 'vic',
+		location: 'Victoria',
+		population: 5996400,
+		growthYear: 2.5,
+		growthDecade: 9.3,
+	},
+	{
+		id: 'qld',
+		location: 'Queensland',
+		population: 4808800,
+		growthYear: 1.7,
+		growthDecade: 13.3,
+	},
+	{
+		id: 'wa',
+		location: 'Western Australia',
+		population: 2603900,
+		growthYear: 2.3,
+		growthDecade: 11.6,
+	},
+	{
+		id: 'sa',
+		location: 'South Australia',
+		population: 1702800,
+		growthYear: 2.0,
+		growthDecade: 6.8,
+	},
+	{
+		id: 'tas',
+		location: 'Tasmania',
+		population: 517400,
+		growthYear: 4,
+		growthDecade: 5.3,
+	},
+	{
+		id: 'nt',
+		location: 'Northern Territory',
+		population: 244400,
+		growthYear: 1.2,
+		growthDecade: 4.5,
+	},
+	{
+		id: 'act',
+		location: 'Australian Capital Territory',
+		population: 393000,
+		growthYear: 2.4,
+		growthDecade: 9.6,
+	},
+];