aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/PullToRefresh.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/app/components/PullToRefresh.tsx')
-rw-r--r--src/frontend/app/components/PullToRefresh.tsx53
1 files changed, 0 insertions, 53 deletions
diff --git a/src/frontend/app/components/PullToRefresh.tsx b/src/frontend/app/components/PullToRefresh.tsx
index 47a6f03..e69de29 100644
--- a/src/frontend/app/components/PullToRefresh.tsx
+++ b/src/frontend/app/components/PullToRefresh.tsx
@@ -1,53 +0,0 @@
-import { type ReactNode } from "react";
-import { RotateCcw } from "lucide-react";
-import "./PullToRefresh.css";
-
-interface PullToRefreshIndicatorProps {
- pullDistance: number;
- isRefreshing: boolean;
- canRefresh: boolean;
- children: ReactNode;
-}
-
-export function PullToRefreshIndicator({
- pullDistance,
- isRefreshing,
- canRefresh,
- children,
-}: PullToRefreshIndicatorProps) {
- const opacity = Math.min(pullDistance / 60, 1);
- const rotation = isRefreshing ? 360 : pullDistance * 4;
- const scale = Math.min(0.5 + (pullDistance / 120), 1);
-
- return (
- <div className="pull-to-refresh-container">
- <div
- className="pull-to-refresh-indicator"
- style={{
- transform: `translateY(${Math.min(pullDistance, 80)}px)`,
- opacity: opacity,
- }}
- >
- <div
- className={`pull-to-refresh-icon ${isRefreshing ? 'spinning' : ''} ${canRefresh ? 'ready' : ''}`}
- style={{
- transform: `rotate(${rotation}deg) scale(${scale})`,
- }}
- >
- <RotateCcw size={24} />
- </div>
- <div className="pull-to-refresh-text">
- {isRefreshing ? "Actualizando..." : canRefresh ? "Suelta para actualizar" : "Arrastra para actualizar"}
- </div>
- </div>
- <div
- className="pull-to-refresh-content"
- style={{
- transform: `translateY(${Math.min(pullDistance * 0.5, 40)}px)`,
- }}
- >
- {children}
- </div>
- </div>
- );
-}