merge

React/src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
+	title: "Fauxcall",
+	description: "Fauxcall is a fake call app that helps you get out of awkward situations.",
 };
 
 export default function RootLayout({

React/src/app/manifest.ts

@@ -0,0 +1,25 @@
+import type { MetadataRoute } from 'next'
+ 
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Fauxcall',
+    short_name: 'Fauxcall',
+    description: 'A fake call app that helps you get out of awkward and dangerous situations.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: '#000000',
+    icons: [
+      {
+        src: '/icon-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        src: '/icon-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  }
+}

React/src/app/page.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import './styles.css';
 
 export default function Home() {
-	const [contacts, setContacts] = useState<string[]>([]);
+	const [contacts, setContacts] = useState<string[]>([""]);
 	const [codeword, setCodeword] = useState("");
 	const [session, setSession] = useState<any>(null);
 	const [loading, setLoading] = useState(true);
@@ -26,6 +26,16 @@ export default function Home() {
 			});
 	}, []);
 
+	const handleInputChange = (index: number, value: string) => {
+		const updatedContacts = [...contacts];
+		updatedContacts[index] = value; // Update the specific input value
+		setContacts(updatedContacts);
+	};
+
+	const addContactInput = () => {
+		setContacts([...contacts, ""]); // Add a new empty input
+	};
+
 	function saveToDB() {
 		alert("Saving contacts...");
 		const contactInputs = document.querySelectorAll(
@@ -144,27 +154,20 @@ export default function Home() {
 					className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
 					onSubmit={(e) => e.preventDefault()}
 				>
-					<input
-						type="text"
-						value={contacts}
-						onChange={(e) => setContacts(e.target.value.split(","))}
-						placeholder="Write down an emergency contact"
-						className="border border-gray-300 rounded-md p-2"
-					/>
-
-
-
+					{contacts.map((contact, index) => (
+						<input
+							key={index}
+							type="text"
+							value={contact}
+							onChange={(e) => handleInputChange(index, e.target.value)}
+							placeholder={`Contact ${index + 1}`}
+							className="border border-gray-300 rounded-md p-2"
+						/>
+					))}
 					<button
-						onClick={() => {
-							alert("Adding contact...");
-							let elem = document.getElementsByClassName(
-								"text-input"
-							)[0] as HTMLElement;
-							console.log("Element:", elem);
-							let d = elem.cloneNode(true) as HTMLElement;
-							document.getElementById("Contacts")?.appendChild(d);
-						}}
-						className="bg-emerald-500 text-fuchsia-300"
+						onClick={addContactInput}
+						className="bg-emerald-500 text-white
+						font-semibold font-lg rounded-md p-2"
 						type="button"
 					>
 						Add