Submitting identifier and fetching customer data

app/components/Landing.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./Landing.module.css";
+import { customerState } from "../store";
+import Calendar from "./Calendar";
+import { fetchCustomerData } from "../api";
+import { useAtom } from "jotai";
+
+export default function Landing() {
+    const [customerData, setCustomerData] = useAtom(customerState);
+
+    const submitIdentifier = (formData: FormData) => {
+        const identifier = formData.get("identifier") as string;
+        if (identifier) {
+            fetchCustomerData(identifier)
+                .then((data) => {
+                    setCustomerData(data);
+                }).catch((error) => {
+                    console.error("Error fetching customer data:", error);
+                });
+        }
+    }
+
+    return (
+        customerData.identifier === 'Tuntematon' ? (
+            <form action={submitIdentifier} className={styles.identifierForm}>
+                <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
+                <input name="identifier" className={styles.identifierInput} />
+                <button type="submit" className={styles.submitButton} >Login</button>
+            </form>) : (
+            <Calendar />
+        )
+    );
+}