Navigation for landing page and Edit Flashcard page

app/flashcards/edit/[id]/page.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { Input, Button, Spin } from 'antd';
+import React from 'react';
+
+interface Flashcard {
+  id: number;
+  title: string;
+  content: string;
+}
+
+export default function EditFlashcardPage() {
+  const { id } = useParams(); // Get flashcard ID from URL
+  const [flashcard, setFlashcard] = useState<Flashcard | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Simulate loading flashcard data 
+  useEffect(() => {
+    const simulateFetchFlashcard = async () => {
+      // Simulate a delay to mimic an API call
+      setTimeout(() => {
+        // Simulated flashcard data based on the ID
+        const simulatedData: Flashcard = {
+          id: Number(id),
+          title: `Flashcard Title ${id}`,
+          content: `Content for flashcard ${id}`
+        };
+
+        setFlashcard(simulatedData);
+        setLoading(false);
+      }, 500); // Simulated loading time
+    };
+
+    simulateFetchFlashcard();
+  }, [id]);
+
+  const handleSave = () => {
+    console.log("Saving changes:", flashcard);
+    // You can implement the API call here when ready
+  };
+
+  const handleDiscard = () => {
+    console.log("Discarding changes");
+    // Reset the state or navigate back
+  };
+
+  if (loading || !flashcard) {
+    return <Spin />;
+  }
+
+  return (
+    <div style={{ padding: 32 }}>
+      <h2>Edit Flashcard</h2>
+      <Input 
+        style={{ marginBottom: 16 }} 
+        value={flashcard.title} 
+        onChange={e => setFlashcard({ ...flashcard, title: e.target.value })} 
+        placeholder="e.g. What is your name?"
+      />
+      <Input.TextArea 
+        rows={4} 
+        value={flashcard.content} 
+        onChange={e => setFlashcard({ ...flashcard, content: e.target.value })} 
+        placeholder="e.g. My name is John Doe."
+      />
+      <div style={{ position: 'fixed', bottom: 20, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: '10px' }}>
+        <Button type="primary" onClick={handleSave}>
+          Save
+        </Button>
+        <Button type="default" onClick={handleDiscard}>
+          Discard Changes
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+
+/*// app/flashcards/edit/[id]/page.tsx
+
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { Input, Button, Spin } from 'antd';
+
+interface Flashcard {
+  id: number;
+  title: string;
+  content: string;
+}
+
+export default function EditFlashcardPage() {
+  const { id } = useParams(); // Get flashcard ID from URL
+  const [flashcard, setFlashcard] = useState<Flashcard | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Simulate loading flashcard data 
+  useEffect(() => {
+    const fetchFlashcard = async () => {
+      try {
+        const res = await fetch(`/api/flashcards/${id}`);
+        if (!res.ok) throw new Error("Failed to load flashcard");
+        const data = await res.json();
+        setFlashcard(data);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchFlashcard();
+  }, [id]);
+
+
+  const handleSave = () => {
+    console.log("Saving changes:", flashcard);
+    // You'd send `flashcard` to your API here
+  };
+
+  if (loading || !flashcard) {
+    return <Spin />;
+  }
+
+  return (
+    <div style={{ padding: 32 }}>
+      <h2>Edit Flashcard</h2>
+      <Input 
+        style={{ marginBottom: 16 }} 
+        value={flashcard.title} 
+        onChange={e => setFlashcard({ ...flashcard, title: e.target.value })} 
+        placeholder="Title"
+      />
+      <Input.TextArea 
+        rows={4} 
+        value={flashcard.content} 
+        onChange={e => setFlashcard({ ...flashcard, content: e.target.value })} 
+        placeholder="Content"
+      />
+      <Button type="primary" onClick={handleSave} style={{ marginTop: 16 }}>
+        Save
+      </Button>
+    </div>
+  );
+}*/

app/home/page.tsx

@@ -230,8 +230,12 @@ const FlashcardPage = () => {
                             ],
                             onClick: (e) => {
                               e.domEvent.stopPropagation();
-                              console.log(`Clicked ${e.key} on card ${flashcard.id}`);
-                            }
+                              if (e.key === 'edit') {
+                                router.push(`/flashcards/edit/${flashcard.id}`);
+                              } else if (e.key === 'delete') {
+                                console.log(`Delete flashcard ${flashcard.id}`);
+                              }
+                            }                            
                           }} 
                           trigger={['click']}
                           placement="bottomRight"

app/page.tsx

@@ -3,24 +3,23 @@
 import React from 'react';
 import Link from 'next/link';
 import './styles/globals.css'; // Importing global CSS
+import { useRouter } from 'next/navigation';
 
 const LandingPage = () => {
+  const router = useRouter();
+
   return (
     <div className="container">
       <header className="header">
-        <Link href="/login">
-          <button className="loginButton button">Log in</button>
-        </Link>
+        <button className="loginButton button" onClick={() => router.push('/login')}>Log in</button>
       </header>
       <h1 className="title">Memory Deck</h1>
-      <p className="description">Helping elderly individuals and those with memory loss retain valuable information through interactive flashcards</p>
+      <p className="description">
+        Helping elderly individuals and those with memory loss retain valuable information through interactive flashcards
+      </p>
       <div className="buttonContainer">
-        <Link href="/register">
-          <button className="button">Get Started</button>
-        </Link>
-        <Link href="/login">
-          <button className="button registerButton">Register</button> {/* Apply the new registerButton class */}
-        </Link>
+        <button className="button" onClick={() => router.push('/register')}>Get Started</button>
+        <button className="button registerButton" onClick={() => router.push('/register')}>Register</button>
       </div>
       <div className="featureCards">
         <div className="flashcard">