51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Loader2, RefreshCw } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PullToRefreshIndicatorProps {
|
|
pullDistance: number;
|
|
isRefreshing: boolean;
|
|
threshold: number;
|
|
}
|
|
|
|
/**
|
|
* Visual indicator for pull-to-refresh.
|
|
* Renders a fixed bar at the top that grows as the user pulls down.
|
|
*/
|
|
export function PullToRefreshIndicator({
|
|
pullDistance,
|
|
isRefreshing,
|
|
threshold,
|
|
}: PullToRefreshIndicatorProps) {
|
|
if (pullDistance === 0 && !isRefreshing) return null;
|
|
|
|
const percent = Math.min(pullDistance / threshold, 1);
|
|
|
|
return (
|
|
<div
|
|
className="pointer-events-none fixed left-1/2 z-[60] flex w-full max-w-[480px] -translate-x-1/2 items-center justify-center overflow-hidden transition-[height] duration-100 ease-out"
|
|
style={{ height: isRefreshing ? 40 : pullDistance }}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-1.5 text-xs font-bold text-[#32518d] transition-opacity",
|
|
pullDistance > 5 || isRefreshing ? "opacity-100" : "opacity-0",
|
|
)}
|
|
>
|
|
{isRefreshing ? (
|
|
<Loader2 className="size-4 animate-spin" aria-hidden />
|
|
) : (
|
|
<RefreshCw
|
|
className="size-4 transition-transform"
|
|
style={{ transform: `rotate(${percent * 360}deg)` }}
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
<span>{isRefreshing ? "…" : ""}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|