init

components/load-route-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useActionState } from "react";
+import { Map } from "lucide-react";
+import { loadActivityRoute, type LoadRouteState } from "@/app/running/actions";
+
+export function LoadRouteButton({ activityId }: { activityId: string }) {
+  const [state, formAction, pending] = useActionState(
+    async (): Promise<LoadRouteState> => loadActivityRoute(activityId),
+    null
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <form action={formAction}>
+        <button
+          type="submit"
+          disabled={pending}
+          className="flex items-center gap-1.5 rounded-md border border-muted/40 bg-surface px-3 py-2 text-sm font-medium text-fg/80 transition-colors hover:border-accent/60 hover:text-accent disabled:opacity-50"
+        >
+          <Map size={15} className={pending ? "animate-pulse" : ""} />
+          {pending ? "Pobieranie mapy..." : "Załaduj mapę trasy"}
+        </button>
+      </form>
+      {state && "error" in state ? <p className="text-sm text-accent">{state.error}</p> : null}
+    </div>
+  );
+}