From d103de63e7c3219d95e7bb9ffa24afc2df8f55cf Mon Sep 17 00:00:00 2001
From: Johanne Blikberg Herheim <joher2128@uib.no>
Date: Sat, 29 Mar 2025 21:41:27 +0100
Subject: [PATCH 1/3] Add maps

---
 app/hobbies/[slug]/page.tsx |  5 +--
 app/profile/[id]/page.tsx   |  9 ++---
 components/posts.tsx        | 66 ++++++++++++++++++++++++++++---------
 components/types/post.ts    | 61 +++++++++++++++++++++++++++++++++-
 components/ui/button.tsx    |  2 ++
 5 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/app/hobbies/[slug]/page.tsx b/app/hobbies/[slug]/page.tsx
index 63c1025..6589e5d 100644
--- a/app/hobbies/[slug]/page.tsx
+++ b/app/hobbies/[slug]/page.tsx
@@ -1,7 +1,6 @@
 import { NewPost } from "@/components/new-post";
 import { Post } from "@/components/posts";
 import { posts } from "@/components/types/post";
-import Link from "next/link";
 interface PageProps {
   params: Promise<{
     slug: string;
@@ -18,9 +17,7 @@ export default async function HobbyPage({ params }: PageProps) {
       <NewPost />
       <div className="w-full grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 ">
         {filteredPosts.map((post) => (
-          <Link href={`/event/${post.id}`} key={post.id}>
-            <Post key={post.date.toISOString()} post={post} />
-          </Link>
+          <Post key={post.id} post={post} link={`/event/${post.id}`} />
         ))}
       </div>
     </div>
diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
index 742d9de..f9f2f2d 100644
--- a/app/profile/[id]/page.tsx
+++ b/app/profile/[id]/page.tsx
@@ -3,7 +3,6 @@ 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 { data: session } = useSession();
@@ -24,9 +23,11 @@ export default function ProfilePage() {
         {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>
+              <Post
+                key={event.date.toISOString()}
+                post={event}
+                link={`/event/${event.id}`}
+              />
             ))}
           </ul>
         ) : (
diff --git a/components/posts.tsx b/components/posts.tsx
index 00140cb..e9becfb 100644
--- a/components/posts.tsx
+++ b/components/posts.tsx
@@ -2,24 +2,58 @@
 import { Calendar, Clock, User } from "lucide-react";
 import { formatDateWithDay, formatTime } from "./lib/date-utils";
 import { Event } from "./types/post";
+import { useState } from "react";
+import { Button } from "./ui/button";
+import Link from "next/link";
 
-export function Post({ post }: { post: Event }) {
+export function Post({ post, link }: { post: Event; link: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleMap = (event: React.MouseEvent) => {
+    // Stopper klikking på kortet når man trykker på knappen
+    event.stopPropagation();
+    setIsExpanded((prev) => !prev);
+  };
   return (
-    <div className="rounded-xl relative border p-4 bg-primary h-full">
-      <p className="font-bold text-lg mb-2">{post.place}</p>
-      <div className="flex space-x-2 w-full">
-        <Calendar className="size-4" />
-        <p>{formatDateWithDay(post.date)}</p>
-      </div>
-      <div className="flex space-x-2">
-        <Clock className="size-4" />
-        <p>{formatTime(post.date)}</p>
-      </div>
-      <div className="flex space-x-2">
-        <User className="size-4" />
-        <p>{post.user.name}</p>
-      </div>
-      <p className="line-clamp-3">{post.description}</p>
+    <div className="rounded-xl relative border p-4 bg-primary h-full space-y-2 hover:shadow-lg transition-shadow duration-300">
+      <Link href={link} className="block no-underline">
+        <p className="font-bold text-lg mb-2">{post.place}</p>
+        <div className="flex space-x-2 w-full">
+          <Calendar className="size-4" />
+          <p>{formatDateWithDay(post.date)}</p>
+        </div>
+        <div className="flex space-x-2">
+          <Clock className="size-4" />
+          <p>{formatTime(post.date)}</p>
+        </div>
+        <div className="flex space-x-2">
+          <User className="size-4" />
+          <p>{post.user.name}</p>
+        </div>
+        <p className="line-clamp-3">{post.description}</p>
+      </Link>
+      {post.mapsLink && (
+        <Button
+          variant="primary"
+          onClick={toggleMap}
+          className="mt-2 space-y-2 absolute top-4 right-4"
+        >
+          {isExpanded ? "Lukk kart" : "Vis kart"}
+        </Button>
+      )}
+      {isExpanded && (
+        <div className="mt-2">
+          <iframe
+            src={post.mapsLink}
+            width="100%"
+            height="300"
+            loading="lazy"
+            className="rounded-md border"
+            allowFullScreen
+            title={`Kart over ${post.place}`}
+          ></iframe>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/components/types/post.ts b/components/types/post.ts
index d164dd3..925989e 100644
--- a/components/types/post.ts
+++ b/components/types/post.ts
@@ -5,6 +5,7 @@ export type Event = {
   id: number;
   date: Date;
   place: string;
+  mapsLink?: string;
   hobby: Interest;
   description: string;
   user: User;
@@ -26,7 +27,9 @@ export const posts: Event[] = [
   {
     id: 1,
     date: new Date("2025-04-01T14:00:00"),
-    place: "Bystranda, Kristiansand",
+    place: "Høyteknologisenteret, Florida",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1971.8992847043078!2d5.3305758702739645!3d60.38082360000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf953233a2e21%3A0x94c7193af76b9f3c!2sHigh%20Technology%20Center%20-%20University%20of%20Bergen!5e0!3m2!1sen!2sno!4v1743279351500!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "bade")!,
     user: getUserById("5") || defaultUser,
     description: "Bading i sjøen med venner.",
@@ -35,6 +38,8 @@ export const posts: Event[] = [
     id: 2,
     date: new Date("2025-04-02T17:30:00"),
     place: "Marienlyst stadion, Drammen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d64349.68693873462!2d10.18405255!3d59.73402170000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46413cb4aa728419%3A0xc578916649a336d9!2sDrammen!5e0!3m2!1sen!2sno!4v1743280528997!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "fotball")!,
     user: getUserById("5") || defaultUser,
     description: "Fotballtrening på stadion.",
@@ -44,6 +49,8 @@ export const posts: Event[] = [
     id: 3,
     date: new Date("2025-04-13T15:00:00"),
     place: "Nordnes Sjøbad, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1970.7999699331606!2d5.3026209!3d60.3989816!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cfc10fcaef8c5%3A0x4aa995fe862c154b!2sNordnes%20seawater%20pool!5e0!3m2!1sen!2sno!4v1743280558511!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "bade")!,
     user: getUserById("1") || defaultUser,
     description: "Bading og avslapning ved sjøbadet.",
@@ -52,6 +59,8 @@ export const posts: Event[] = [
     id: 4,
     date: new Date("2025-04-14T18:00:00"),
     place: "Brann Stadion, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1972.7395475525484!2d5.3574701!3d60.3669423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf939026c541b%3A0x2bfea90d566fa549!2sBrann%20Stadion!5e0!3m2!1sen!2sno!4v1743280586014!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "fotball")!,
     user: getUserById("1") || defaultUser,
     description: "Fotballkamp mellom lokale lag.",
@@ -60,6 +69,8 @@ export const posts: Event[] = [
     id: 5,
     date: new Date("2025-04-15T10:00:00"),
     place: "Voss Resort, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1956.8510739237001!2d6.410883799999999!3d60.629100699999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463ddadc0e6e8a51%3A0xd45822a2ecaa1f0!2sVoss%20Resort%20Fjellheisar!5e0!3m2!1sen!2sno!4v1743280610607!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "ski")!,
     user: getUserById("5") || defaultUser,
     description: "Skikjøring i flotte løyper.",
@@ -68,6 +79,8 @@ export const posts: Event[] = [
     id: 6,
     date: new Date("2025-04-16T12:00:00"),
     place: "Ulriken, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "klatre")!,
     user: getUserById("5") || defaultUser,
     description: "Klatretur i fjellet.",
@@ -76,6 +89,9 @@ export const posts: Event[] = [
     id: 7,
     date: new Date("2025-04-17T17:00:00"),
     place: "Framohallen, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
+
     hobby: interests.find((h) => h.slug === "handball")!,
     user: getUserById("2") || defaultUser,
     description: "Håndballtrening med lagkamerater.",
@@ -84,6 +100,9 @@ export const posts: Event[] = [
     id: 8,
     date: new Date("2025-04-18T09:00:00"),
     place: "Store Lungegårdsvann, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
+
     hobby: interests.find((h) => h.slug === "lope")!,
     user: getUserById("2") || defaultUser,
     description: "Morgentur langs vannet.",
@@ -92,6 +111,8 @@ export const posts: Event[] = [
     id: 9,
     date: new Date("2025-04-19T14:00:00"),
     place: "Bergen Basketballklubb",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "basketball")!,
     user: getUserById("2") || defaultUser,
     description: "Basketballkamp i hallen.",
@@ -100,6 +121,8 @@ export const posts: Event[] = [
     id: 10,
     date: new Date("2025-04-20T11:00:00"),
     place: "Bergen Golfklubb",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "golf")!,
     user: getUserById("2") || defaultUser,
     description: "Golfturnering for nybegynnere.",
@@ -108,6 +131,8 @@ export const posts: Event[] = [
     id: 11,
     date: new Date("2025-04-21T16:00:00"),
     place: "Bergen Offentlige Bibliotek",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "kotlin")!,
     user: getUserById("2") || defaultUser,
     description: "Kotlin workshop for utviklere.",
@@ -116,6 +141,8 @@ export const posts: Event[] = [
     id: 12,
     date: new Date("2025-04-22T15:30:00"),
     place: "Nordnes Tennisanlegg, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "tennis")!,
     user: getUserById("2") || defaultUser,
     description: "Tennistrening for alle nivåer.",
@@ -124,6 +151,8 @@ export const posts: Event[] = [
     id: 13,
     date: new Date("2025-04-23T14:00:00"),
     place: "Flesland Flyplass, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "fly")!,
     user: getUserById("3") || defaultUser,
     description: "Flyspotting og foto av fly.",
@@ -132,6 +161,8 @@ export const posts: Event[] = [
     id: 14,
     date: new Date("2025-04-24T18:30:00"),
     place: "Bergen Yoga Studio",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "yoga")!,
     user: getUserById("3") || defaultUser,
     description: "Yogaklasse for stressmestring.",
@@ -140,6 +171,8 @@ export const posts: Event[] = [
     id: 15,
     date: new Date("2025-04-25T19:00:00"),
     place: "Kode Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "rust")!,
     user: getUserById("3") || defaultUser,
     description: "Rust-programmering for viderekomne.",
@@ -148,6 +181,8 @@ export const posts: Event[] = [
     id: 16,
     date: new Date("2025-04-26T10:00:00"),
     place: "Fløibanen, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "vandring")!,
     user: getUserById("3") || defaultUser,
     description: "Morgenvandring til Fløyen.",
@@ -156,6 +191,8 @@ export const posts: Event[] = [
     id: 17,
     date: new Date("2025-04-27T12:30:00"),
     place: "Torgallmenningen, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "yoga")!,
     user: getUserById("3") || defaultUser,
     description: "Gratis utendørs yogatime.",
@@ -164,6 +201,8 @@ export const posts: Event[] = [
     id: 18,
     date: new Date("2025-04-28T14:00:00"),
     place: "Møhlenpris Idrettsbane, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "fotball")!,
     user: getUserById("3") || defaultUser,
     description: "Fotballkamp mellom vennelag.",
@@ -172,6 +211,8 @@ export const posts: Event[] = [
     id: 19,
     date: new Date("2025-04-29T18:00:00"),
     place: "VilVite, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "kotlin")!,
     user: getUserById("4") || defaultUser,
     description: "Introduksjon til Kotlin-programmering.",
@@ -180,6 +221,8 @@ export const posts: Event[] = [
     id: 20,
     date: new Date("2025-04-30T09:00:00"),
     place: "Sandviken Sjøbad, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "bade")!,
     user: getUserById("4") || defaultUser,
     description: "Morgensvøm i sjøen.",
@@ -188,6 +231,8 @@ export const posts: Event[] = [
     id: 21,
     date: new Date("2025-05-01T16:00:00"),
     place: "Fana Golfklubb, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "golf")!,
     user: getUserById("4") || defaultUser,
     description: "Golfturnering for amatører.",
@@ -196,6 +241,8 @@ export const posts: Event[] = [
     id: 22,
     date: new Date("2025-05-02T11:30:00"),
     place: "Bergen Tennisklubb",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "tennis")!,
     user: getUserById("4") || defaultUser,
     description: "Tennisturnering for nybegynnere.",
@@ -204,6 +251,8 @@ export const posts: Event[] = [
     id: 23,
     date: new Date("2025-05-03T14:30:00"),
     place: "Kyrkjetangen, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "basketball")!,
     user: getUserById("4") || defaultUser,
     description: "Basketballspill med venner.",
@@ -212,6 +261,8 @@ export const posts: Event[] = [
     id: 24,
     date: new Date("2025-05-04T17:00:00"),
     place: "Alvøen Idrettspark, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "handball")!,
     user: getUserById("4") || defaultUser,
     description: "Håndballkamp mellom lokalag.",
@@ -220,6 +271,8 @@ export const posts: Event[] = [
     id: 25,
     date: new Date("2025-05-05T08:30:00"),
     place: "Ulriken, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "lope")!,
     user: getUserById("5") || defaultUser,
     description: "Løpetur til toppen av Ulriken.",
@@ -228,6 +281,8 @@ export const posts: Event[] = [
     id: 26,
     date: new Date("2025-05-06T13:00:00"),
     place: "Høyteknologisenteret, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "rust")!,
     user: getUserById("5") || defaultUser,
     description: "Workshop i Rust-programmering.",
@@ -236,6 +291,8 @@ export const posts: Event[] = [
     id: 27,
     date: new Date("2025-05-07T20:00:00"),
     place: "Flesland Flyplass, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "fly")!,
     user: getUserById("1") || defaultUser,
     description: "Kveldsflyspotting på flyplassen.",
@@ -244,6 +301,8 @@ export const posts: Event[] = [
     id: 28,
     date: new Date("2025-05-08T15:00:00"),
     place: "Damsgårdsfjellet, Bergen",
+    mapsLink:
+      "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7888.405355937868!2d5.3869521!3d60.377485799999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463cf92af87f339d%3A0x84391761658b3434!2sUlriken!5e0!3m2!1sen!2sno!4v1743280667409!5m2!1sen!2sno",
     hobby: interests.find((h) => h.slug === "klatre")!,
     user: getUserById("1") || defaultUser,
     description: "Klatring på naturlige ruter.",
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 4134107..9030bae 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -11,6 +11,8 @@ const buttonVariants = cva(
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        primary:
+          "bg-muted text-primary-foreground shadow-xs hover:bg-background transition-all duration-200",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

From 4685230ef9823eace822b79837b9a75d1a71618f Mon Sep 17 00:00:00 2001
From: Johanne Blikberg Herheim <joher2128@uib.no>
Date: Sat, 29 Mar 2025 21:44:24 +0100
Subject: [PATCH 2/3] Fix grid

---
 app/profile/[id]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
index f9f2f2d..09fe659 100644
--- a/app/profile/[id]/page.tsx
+++ b/app/profile/[id]/page.tsx
@@ -21,7 +21,7 @@ export default function ProfilePage() {
       <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">
+          <ul className="space-y-2 mt-2 grid grid-cols-1 md:grid-cols-2  gap-4">
             {myEvents.map((event) => (
               <Post
                 key={event.date.toISOString()}

From 378de106d07f13382ef69327394b919d9dafc24f Mon Sep 17 00:00:00 2001
From: Johanne Blikberg Herheim <joher2128@uib.no>
Date: Sat, 29 Mar 2025 21:45:02 +0100
Subject: [PATCH 3/3] Fix grid

---
 app/hobbies/[slug]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/hobbies/[slug]/page.tsx b/app/hobbies/[slug]/page.tsx
index 6589e5d..3b106e4 100644
--- a/app/hobbies/[slug]/page.tsx
+++ b/app/hobbies/[slug]/page.tsx
@@ -15,7 +15,7 @@ export default async function HobbyPage({ params }: PageProps) {
   return (
     <div className="relative p-4 w-full space-y-4">
       <NewPost />
-      <div className="w-full grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 ">
+      <div className="w-full grid grid-cols-1 gap-4 md:grid-cols-2 ">
         {filteredPosts.map((post) => (
           <Post key={post.id} post={post} link={`/event/${post.id}`} />
         ))}