Clubs page

app/[locale]/clubs/ClubMap.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+
+import { useAtomValue } from "jotai";
+import L, { LatLngLiteral } from "leaflet";
+import "leaflet-defaulticon-compatibility";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet.smooth_marker_bouncing";
+import "leaflet/dist/leaflet.css";
+import { countBy, groupBy } from "lodash";
+
+import { clubsAtom } from "@/app/atoms";
+import { Map, MapMarker } from "@/components/Map";
+
+import { ClubMarker } from "./ClubMarker";
+
+const ClubMap = () => {
+  const clubs = useAtomValue(clubsAtom);
+
+  const markers: MapMarker[] = useMemo(
+    () =>
+      clubs.map((club) => {
+        return {
+          markerId: club.id,
+          tableIds: [club.id],
+          component: <ClubMarker key={club.id} club={club} />,
+        };
+      }),
+    [clubs],
+  );
+
+  return <Map markers={markers} />;
+};
+
+export default ClubMap;