Zone collection + creation

Zone create UI flow

src/app/[locale]/(main)/zones/components/ZoneForm.tsx

@@ -12,9 +12,21 @@ import { ZoneEditorField } from "@/components/form/ZoneEditorField";
 import { zoneSchema } from "@/schemas";
 import { TimeControl } from "@/types";
 
-type ZoneFormValues = z.infer<typeof zoneSchema>;
+export type ZoneFormValues = z.infer<typeof zoneSchema>;
 
-export const ZoneForm = () => {
+type ZoneFormProps = {
+  onSubmit: (data: ZoneFormValues) => Promise<void>;
+  onCancel: () => void;
+  submitTitle?: string;
+  cancelTitle?: string;
+};
+
+export const ZoneForm = ({
+  onSubmit,
+  onCancel,
+  submitTitle,
+  cancelTitle,
+}: ZoneFormProps) => {
   const t = useTranslations("Zones");
   const at = useTranslations("App");
   const form = useForm<ZoneFormValues>({
@@ -30,67 +42,67 @@ export const ZoneForm = () => {
     },
   });
 
-  const onSubmit = async (data: ZoneFormValues) => {
-    try {
-      console.log(data);
-    } catch (err: unknown) {
-      console.log(err);
-    }
-  };
-
   return (
-    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <div className="grid grid-cols-3 items-start gap-6">
-            <div className="col-span-3">
-              <TextField
-                name="name"
-                control={form.control}
-                label={t("zoneNameLabel")}
-                placeholder={t("zoneNamePlaceholder")}
-                required
-              />
-            </div>
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div className="grid grid-cols-3 items-start gap-6">
+          <div className="col-span-3">
+            <TextField
+              name="name"
+              control={form.control}
+              label={t("zoneNameLabel")}
+              placeholder={t("zoneNamePlaceholder")}
+              required
+            />
+          </div>
 
-            <div className="col-span-3">
-              <div className="flex flex-col gap-4">
-                <Label>{t("notificationsLabel")}</Label>
-                <div className="font-light text-gray-500 dark:text-gray-400">
-                  {t("notificationsInfo")}
-                </div>
+          <div className="col-span-3">
+            <div className="flex flex-col gap-4">
+              <Label>{t("notificationsLabel")}</Label>
+              <div className="font-light text-gray-500 dark:text-gray-400">
+                {t("notificationsInfo")}
               </div>
             </div>
-
-            <InlineSwitchField
-              name="classicNotifications"
-              control={form.control}
-              label={at("timeControlEnum", { tc: TimeControl.Classic })}
-            />
-            <InlineSwitchField
-              name="rapidNotifications"
-              control={form.control}
-              label={at("timeControlEnum", { tc: TimeControl.Rapid })}
-            />
-            <InlineSwitchField
-              name="blitzNotifications"
-              control={form.control}
-              label={at("timeControlEnum", { tc: TimeControl.Blitz })}
-            />
-
-            <section id="map" className="z-0 col-span-3 flex h-auto">
-              <ZoneEditorField name="features" control={form.control} />
-            </section>
           </div>
+
+          <InlineSwitchField
+            name="classicNotifications"
+            control={form.control}
+            label={at("timeControlEnum", { tc: TimeControl.Classic })}
+          />
+          <InlineSwitchField
+            name="rapidNotifications"
+            control={form.control}
+            label={at("timeControlEnum", { tc: TimeControl.Rapid })}
+          />
+          <InlineSwitchField
+            name="blitzNotifications"
+            control={form.control}
+            label={at("timeControlEnum", { tc: TimeControl.Blitz })}
+          />
+
+          <section id="map" className="z-0 col-span-3 flex h-auto">
+            <ZoneEditorField name="features" control={form.control} />
+          </section>
+        </div>
+
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={onCancel}
+            className="rounded-lg border border-primary px-3 py-2 text-center text-xs text-primary  hover:bg-primary hover:text-white focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:focus:ring-primary-800 sm:w-fit"
+          >
+            {cancelTitle ?? at("cancelButton")}
+          </button>
+
           <button
             disabled={form.formState.isSubmitting}
             type="submit"
             className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
           >
-            {t("saveButton")}
+            {submitTitle ?? at("saveButton")}
           </button>
-        </form>
-      </FormProvider>
-    </div>
+        </div>
+      </form>
+    </FormProvider>
   );
 };

src/app/[locale]/(main)/zones/components/ZoneThumbnail.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import L, { LatLngLiteral } from "leaflet";
+import "leaflet-defaulticon-compatibility";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet/dist/leaflet.css";
+import { FeatureGroup, GeoJSON, MapContainer, TileLayer } from "react-leaflet";
+
+import { MapEvents } from "@/components/MapEvents";
+import type { ZoneModel } from "@/server/models/zoneModel";
+
+const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
+
+export type ZoneThumbnailProps = {
+  features: ZoneModel["features"];
+  size: number;
+};
+
+export const ZoneThumbnail = ({ features, size }: ZoneThumbnailProps) => {
+  return (
+    <MapContainer
+      center={center}
+      zoom={5}
+      zoomControl={false}
+      scrollWheelZoom={false}
+      dragging={false}
+      style={{ height: size, width: size }}
+      attributionControl={false}
+    >
+      <MapEvents bounds={L.geoJson(features).getBounds()} />
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+
+      <GeoJSON data={features} />
+    </MapContainer>
+  );
+};
+
+export default ZoneThumbnail;