diff options
Diffstat (limited to 'src/frontend/app/components/PullToRefresh.tsx')
| -rw-r--r-- | src/frontend/app/components/PullToRefresh.tsx | 53 |
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> - ); -} |
