29 lines
878 B
TypeScript
29 lines
878 B
TypeScript
"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="btn btn-secondary"
|
|
>
|
|
<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>
|
|
);
|
|
}
|