Add my-events to profile page

app/event/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { formatDateWithDay, formatTime } from "@/components/lib/date-utils";
 import { Event, getEventById } from "@/components/types/post";
 import { Button } from "@/components/ui/button";
 import { Calendar, Clock, User } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 
@@ -74,13 +75,31 @@ function EventButtons() {
   );
 }
 
+type Comment = {
+  user: string;
+  text: string;
+  time: string;
+};
+
 function CommentSection() {
-  const [comments, setComments] = useState<string[]>([]);
+  const [comments, setComments] = useState<Comment[]>([]);
   const [newComment, setNewComment] = useState("");
+  const { data: session } = useSession();
+  const user = session?.user;
 
   const handleAddComment = () => {
-    if (newComment.trim() === "") return;
-    setComments((prev) => [...prev, newComment.trim()]);
+    if (newComment.trim() === "" || !user) return;
+
+    const newCommentObj: Comment = {
+      user: user.name || "Anonym",
+      text: newComment.trim(),
+      time: new Date().toLocaleString("no-NO", {
+        dateStyle: "short",
+        timeStyle: "short",
+      }),
+    };
+
+    setComments((prev) => [...prev, newCommentObj]);
     setNewComment("");
   };
 
@@ -93,7 +112,17 @@ function CommentSection() {
             key={index}
             className="bg-primary p-2 rounded-md shadow-md text-sm"
           >
-            {comment}
+            <div className="flex">
+              <div className="w-8 h-8 inline-block mr-2 bg-background rounded-full relative">
+                <User className="absolute mx-auto size-3 w-full h-full my-auto p-1" />
+              </div>
+              <div>
+                <p className="font-semibold">{comment.user}</p>
+                <p className="text-xs text-gray-500 mb-2">{comment.time}</p>
+              </div>
+            </div>
+
+            <p>{comment.text}</p>
           </div>
         ))}
       </div>

app/lib/authOptions.ts

@@ -1,3 +1,4 @@
+import { users } from "@/components/types/user";
 import { NextAuthOptions } from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 
@@ -10,19 +11,23 @@ export const authOptions: NextAuthOptions = {
         password: { label: "Password", type: "password" },
       },
       async authorize(credentials) {
-        const user = {
-          id: "1",
-          name: "Ole Brumm",
-          email: "OleBrumm@example.com",
-        };
+        if (!credentials?.email || !credentials?.password) {
+          return null;
+        }
+
+        // Søk etter brukeren i listen basert på e-post og passord
+        const user = users.find(
+          (user) =>
+            user.email === credentials.email &&
+            user.password === credentials.password
+        );
 
-        if (
-          credentials?.email === "OleBrumm@example.com" &&
-          credentials?.password === "pass123"
-        ) {
-          return user;
+        // Hvis brukeren finnes, returner brukerobjektet
+        if (user) {
+          return { id: user.id, name: user.name, email: user.email };
         }
 
+        // Hvis ingen match finnes, returner null
         return null;
       },
     }),

app/profile/[id]/page.tsx

@@ -1,18 +1,39 @@
 "use client";
+import { Post } from "@/components/posts";
+import { posts } from "@/components/types/post";
 import { Button } from "@/components/ui/button";
 import { signOut, useSession } from "next-auth/react";
+import Link from "next/link";
 
 export default function ProfilePage() {
-  const user = { id: 1, name: "Ole Brumm", email: "ole@brumm.no" };
   const { data: session } = useSession();
 
+  const user = session?.user;
+  const myEvents = posts.filter((event) => event.user.email === user?.email);
+
   return (
     <div className="p-6 space-y-5">
       <div>
-        <h1 className="text-3xl font-bold">{user.name}</h1>
-        <p className="mt-4">Navn: {user.name}</p>
-        <p>E-post: {user.email}</p>
+        <h1 className="text-3xl font-bold">{user?.name}</h1>
+        <p className="mt-4">Navn: {user?.name}</p>
+        <p>E-post: {user?.email}</p>
       </div>
+
+      <div>
+        <h2 className="text-2xl font-semibold">Mine arrangementer:</h2>
+        {myEvents.length > 0 ? (
+          <ul className="space-y-2 mt-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {myEvents.map((event) => (
+              <Link href={`/event/${event.id}`} key={event.id}>
+                <Post key={event.date.toISOString()} post={event} />
+              </Link>
+            ))}
+          </ul>
+        ) : (
+          <p className="mt-2">Ingen arrangementer funnet.</p>
+        )}
+      </div>
+
       {session && (
         <Button
           variant="secondary"