29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
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="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>
|
||
|
|
);
|
||
|
|
}
|