location box working

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

@@ -46,28 +46,31 @@ export default function EventPage({
   const location = getTagAllValues("location", event.tags)[0]
     ? getTagAllValues("location", event.tags)
     : getTagAllValues("address", event.tags);
+  const geohash = getTagValues("g", 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 && (
+        <div className="flex flex-col gap-3 @xl:flex-row-reverse">
+          {!!location && !!geohash && (
             <LocationPreview
-              coordinates={{ lat: 42, lng: 34 }}
+              geohash={geohash}
               address={location[0] as string}
             />
           )}
-          <Feed
-            filter={{
-              ids: noteIds,
-            }}
-            empty={() => (
-              <div className="text-center text-muted-foreground">
-                <p>No notes yet</p>
-              </div>
-            )}
-          />
+          <div className="flex-1 space-y-3 overflow-hidden rounded-[0.5rem] p-0">
+            <Feed
+              filter={{
+                ids: noteIds,
+              }}
+              empty={() => (
+                <div className="pt-5 text-center text-muted-foreground">
+                  <p>No Announcements yet</p>
+                </div>
+              )}
+            />
+          </div>
         </div>
       </div>
     </div>

components/Cards/CalendarEvent/index.tsx

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

components/LocationPreview/index.tsx

@@ -11,22 +11,22 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
+import Geohash from "latlon-geohash";
+import { HiMapPin } from "react-icons/hi2";
 
 type LocationPreviewProps = {
-  coordinates: {
-    lat: number;
-    lng: number;
-  };
+  geohash: string;
   address: string;
   className?: string;
 };
 export default function LocationPreview({
-  coordinates,
+  geohash,
   address,
   className,
 }: LocationPreviewProps) {
   const libraries = useMemo(() => ["places"], []);
-  const mapCenter = useMemo(() => coordinates, []);
+  const { lat, lon } = Geohash.decode(geohash);
+  const mapCenter = useMemo(() => ({ lat, lng: lon }), []);
 
   const mapOptions = useMemo<google.maps.MapOptions>(
     () => ({
@@ -43,24 +43,40 @@ export default function LocationPreview({
   });
 
   if (!isLoaded) {
-    return <p>Loading...</p>;
+    return (
+      <Card className={cn(className)}>
+        <CardHeader className="flex flex-row items-center gap-3 space-y-0 p-3">
+          <HiMapPin className="h-5 w-5" />
+          <CardTitle>Location</CardTitle>
+        </CardHeader>
+        <CardContent className="h-[150px] p-0">
+          <div className="h-full w-full bg-muted"></div>
+        </CardContent>
+        <CardFooter className="p-3 text-sm text-muted-foreground">
+          {address}
+        </CardFooter>
+      </Card>
+    );
   }
   return (
     <Card className={cn(className)}>
-      <CardHeader>
+      <CardHeader className="flex flex-row items-center gap-3 space-y-0 p-3">
+        <HiMapPin className="h-5 w-5" />
         <CardTitle>Location</CardTitle>
       </CardHeader>
-      <CardContent className="p-0">
+      <CardContent className="h-[150px] p-0">
         <GoogleMap
           options={mapOptions}
           zoom={14}
           center={mapCenter}
           mapTypeId={google.maps.MapTypeId.ROADMAP}
-          mapContainerStyle={{ width: "200px", height: "200px" }}
+          mapContainerStyle={{ width: "100%", height: "100%" }}
           onLoad={() => console.log("Map Component Loaded...")}
         />
-        <CardFooter>{address}</CardFooter>
       </CardContent>
+      <CardFooter className="p-3 text-sm text-muted-foreground">
+        {address}
+      </CardFooter>
     </Card>
   );
 }

components/LocationSearch/index.tsx

@@ -24,17 +24,20 @@ import {
 import { Button } from "@/components/ui/button";
 import { useLoadScript } from "@react-google-maps/api";
 import Spinner from "../spinner";
+import Geohash from "latlon-geohash";
 
 type LocationSearchInputProps = {
   onSelect: (location: {
     name: string;
     address: string;
     coordinates: { lat: number; lng: number };
+    geohash: string;
   }) => void;
   location?: {
     name: string;
     address: string;
     coordinates: { lat: number; lng: number };
+    geohash: string;
   };
 };
 export default function LocationSearchInput({
@@ -73,11 +76,13 @@ type CommandSearchProps = {
     name: string;
     address: string;
     coordinates: { lat: number; lng: number };
+    geohash: string;
   }) => void;
   location?: {
     name: string;
     address: string;
     coordinates: { lat: number; lng: number };
+    geohash: string;
   };
 };
 function CommandSearch({ location, onSelect }: CommandSearchProps) {
@@ -99,11 +104,13 @@ function CommandSearch({ location, onSelect }: CommandSearchProps) {
     });
     if (!result[0]) return;
     const coordinates = getLatLng(result[0]);
+    const geohash = Geohash.encode(coordinates.lat, coordinates.lng, 6);
     setOpen(false);
     return onSelect({
       name,
       coordinates,
       address: result[0].formatted_address,
+      geohash,
     });
   }
   return (

components/Modals/CreateCalendarEvent.tsx

@@ -70,6 +70,7 @@ export default function CreateCalendarEventModal() {
     address: string;
     name: string;
     coordinates: { lat: number; lng: number };
+    geohash: string;
   }>();
   const { ndk } = useNDK();
   const { currentUser } = useCurrentUser();
@@ -107,6 +108,7 @@ export default function CreateCalendarEventModal() {
           location.name,
           location.address,
         ]);
+        tags.push(["g", location.geohash]);
       }
       if (imageUrl) {
         tags.push(["image", imageUrl]);

package.json

@@ -46,6 +46,7 @@
     "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.16.4",
     "jotai": "^2.4.3",
+    "latlon-geohash": "^2.0.0",
     "next": "13.5.4",
     "next-themes": "^0.2.1",
     "node-html-parser": "^6.1.10",
@@ -73,6 +74,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/crypto-js": "^4.1.2",
+    "@types/latlon-geohash": "^2.0.2",
     "@types/node": "^20",
     "@types/ramda": "^0.29.6",
     "@types/react": "^18",