Add Tournament form

app/[lang]/components/InfoMessage.tsx

@@ -0,0 +1,30 @@
+import { ResponseMessage } from "@/types";
+import { Dispatch, SetStateAction } from "react";
+
+const InfoMessage = ({
+  responseMessage,
+}: {
+  responseMessage: ResponseMessage;
+}) => (
+  <p
+    className={`${
+      responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
+    } italic`}
+    data-test="info-message"
+  >
+    {responseMessage.message}
+  </p>
+);
+
+export const clearMessage = (
+  setResponseMessage: Dispatch<SetStateAction<ResponseMessage>>,
+) => {
+  setTimeout(() => {
+    setResponseMessage({
+      isSuccessful: false,
+      message: "",
+    });
+  }, 10000);
+};
+
+export default InfoMessage;

app/[lang]/components/LoadingMap.tsx

@@ -0,0 +1,12 @@
+import { useTranslations } from "next-intl";
+
+const LoadingMap = () => {
+  const t = useTranslations("Tournaments");
+  return (
+    <div className="grid h-content place-self-center bg-white text-center text-gray-900 dark:bg-gray-800 dark:text-white">
+      <p>{t("loading")}</p>
+    </div>
+  );
+};
+
+export default LoadingMap;

app/[lang]/components/MapEvents.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useSetAtom } from "jotai";
+import { mapBoundsAtom } from "@/app/atoms";
+import L from "leaflet";
+import { useMapEvent } from "react-leaflet";
+
+const MapEvents = () => {
+  const setMapBounds = useSetAtom(mapBoundsAtom);
+
+  const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180));
+  const franceBounds = L.latLngBounds(
+    L.latLng(42.08, -5.12),
+    L.latLng(51.17, 9.53),
+  );
+
+  const map = useMapEvent("moveend", () => {
+    // Set the map bounds atoms when the user pans/zooms
+    setMapBounds(map.getBounds());
+  });
+
+  // viewport agnostic centering of France & max world bounds
+  useEffect(() => {
+    map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
+    map.setMaxBounds(worldBounds);
+    map.options.maxBoundsViscosity = 1.0; // Prevents going past bounds while dragging
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return null;
+};
+
+export default MapEvents;