wip

Author: barrynorthern-tf

src/app/components/AddressForm/index.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import Box from "@mui/joy/Box";
+import FormControl from "@mui/joy/FormControl";
+import FormLabel from "@mui/joy/FormLabel";
+import FormHelperText from "@mui/joy/FormHelperText";
+import Input from "@mui/joy/Input";
+
+export default function AddressForm() {
+  return (
+    <Box
+      component="form"
+      sx={{
+        "& .MuiInput-root": { my: 2 },
+      }}
+      noValidate
+      autoComplete="off"
+    >
+      <div>
+        <FormControl>
+          <FormLabel sx={{ color: "black" }}>Name</FormLabel>
+          <FormHelperText>Please enter a name</FormHelperText>
+          <Input
+            required
+            name="name"
+            defaultValue=""
+            placeholder="Enter a name"
+            fullWidth
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel sx={{ color: "#444" }}>Line 1</FormLabel>
+          <Input
+            required
+            name="line1"
+            defaultValue=""
+            placeholder="Enter line 1"
+            fullWidth
+            sx={{ ml: 1 }}
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel sx={{ color: "#000" }}>Line 2</FormLabel>
+          <Input
+            name="line2"
+            defaultValue=""
+            placeholder="Enter line 2"
+            fullWidth
+            sx={{ ml: 1 }}
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel sx={{ color: "rgba(0, 0, 0, 0.9)" }}>Postcode</FormLabel>
+          <Input
+            required
+            name="line1"
+            defaultValue=""
+            placeholder="Enter postcode"
+            fullWidth
+            sx={{ ml: 1 }}
+          />
+        </FormControl>
+      </div>
+    </Box>
+  );
+}

src/app/page.tsx

@@ -3,6 +3,7 @@ import Box from "@mui/joy/Box";
 import Stack from "@mui/joy/Stack";
 import Typography from "@mui/joy/Typography";
 import { Button } from "./components/Button";
+import AddressForm from "./components/AddressForm";
 
 export default function Home() {
   return (
@@ -28,7 +29,7 @@ export default function Home() {
           p: 2,
         }}
       >
-        <pre>TODO: Address Form</pre>
+        <AddressForm />
       </Box>
       <Box sx={{ width: "100%", display: "flex", justifyContent: "flex-end" }}>
         <Button