testing loction

app/(app)/event/[naddr]/page.tsx

@@ -4,9 +4,14 @@ import Image from "next/image";
 import { nip19 } from "nostr-tools";
 import useEvents from "@/lib/hooks/useEvents";
 import Spinner from "@/components/spinner";
-import { getTagValues, getTagsValues } from "@/lib/nostr/utils";
+import {
+  getTagAllValues,
+  getTagValues,
+  getTagsValues,
+} from "@/lib/nostr/utils";
 import Feed from "@/containers/Feed";
 import Header from "./_components/Header";
+import LocationPreview from "@/components/LocationPreview";
 
 export default function EventPage({
   params: { naddr },
@@ -38,12 +43,21 @@ export default function EventPage({
     );
   }
   const noteIds = getTagsValues("e", event.tags).filter(Boolean);
+  const location = getTagAllValues("location", event.tags)[0]
+    ? getTagAllValues("location", event.tags)
+    : getTagAllValues("address", event.tags);
 
   return (
     <div className="relative mx-auto max-w-5xl space-y-4 p-2 sm:p-4">
       <Header event={event} />
       <div className="relative overflow-hidden rounded-[1rem] border bg-muted p-[0.5rem] @container">
         <div className="space-y-3 overflow-hidden rounded-[0.5rem] p-0">
+          {location && (
+            <LocationPreview
+              coordinates={{ lat: 42, lng: 34 }}
+              address={location[0] as string}
+            />
+          )}
           <Feed
             filter={{
               ids: noteIds,

components/Cards/CalendarEvent/index.tsx

@@ -70,7 +70,7 @@ export default function CalendarEventCard({
             height={150}
             unoptimized
             className={cn(
-              "h-auto w-auto object-cover transition-all group-hover:scale-105",
+              "h-full w-auto object-cover transition-all group-hover:scale-105",
               "aspect-video",
             )}
           />

components/LocationPreview/index.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useLoadScript, GoogleMap } from "@react-google-maps/api";
+import type { NextPage } from "next";
+import { useMemo } from "react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type LocationPreviewProps = {
+  coordinates: {
+    lat: number;
+    lng: number;
+  };
+  address: string;
+  className?: string;
+};
+export default function LocationPreview({
+  coordinates,
+  address,
+  className,
+}: LocationPreviewProps) {
+  const libraries = useMemo(() => ["places"], []);
+  const mapCenter = useMemo(() => coordinates, []);
+
+  const mapOptions = useMemo<google.maps.MapOptions>(
+    () => ({
+      disableDefaultUI: true,
+      clickableIcons: true,
+      scrollwheel: false,
+    }),
+    [],
+  );
+
+  const { isLoaded } = useLoadScript({
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY as string,
+    libraries: libraries as any,
+  });
+
+  if (!isLoaded) {
+    return <p>Loading...</p>;
+  }
+  return (
+    <Card className={cn(className)}>
+      <CardHeader>
+        <CardTitle>Location</CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <GoogleMap
+          options={mapOptions}
+          zoom={14}
+          center={mapCenter}
+          mapTypeId={google.maps.MapTypeId.ROADMAP}
+          mapContainerStyle={{ width: "200px", height: "200px" }}
+          onLoad={() => console.log("Map Component Loaded...")}
+        />
+        <CardFooter>{address}</CardFooter>
+      </CardContent>
+    </Card>
+  );
+}