import React from "react"; import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, Easing, } from "remotion"; import { ShoppingBag, Globe, Tag, TrendingUp, ArrowRight, Bell, CheckCircle2, Clock, XCircle, ChevronsUpDown, } from "lucide-react"; import { ScreenFrame } from "../components/ScreenFrame"; import { WORLD_TRANSFERS } from "../data/transfers"; const eo = Easing.bezier(0.16, 1, 0.3, 1); export const TransfersScene: React.FC = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const sceneOpacity = interpolate(frame, [0, fps * 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); const exitOpacity = interpolate( frame, [fps * 3.5, fps * 4.0], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }, ); // Incoming-offer toast (top-right) appears mid-scene. const toastIn = interpolate(frame, [fps * 1.4, fps * 1.8], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.bezier(0.34, 1.56, 0.64, 1), }); const toastOut = interpolate(frame, [fps * 3.0, fps * 3.5], [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); return (
{/* Page header */}
{/* Tab strip */} {/* Body: World Transfers */}
{/* Floating offer toast */} ); }; // ───────────────────────────────────────────────────────────────────────────── const Header: React.FC<{ frame: number; fps: number }> = ({ frame, fps }) => { const o = interpolate(frame, [0, fps * 0.4], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); return (

Transfers

Live market · 47 deals today · €2.1B traded this window

{/* Budget summary */}
Transfer Budget €247M
Wage Headroom €4.2M/wk
); }; const Tabs: React.FC<{ frame: number; fps: number }> = ({ frame, fps }) => { const o = interpolate(frame, [fps * 0.1, fps * 0.5], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); const tabs = [ { label: "My Transfers", icon: ShoppingBag, count: 3, active: false }, { label: "World", icon: Globe, count: 47, active: true }, { label: "For Sale", icon: Tag, count: 12, active: false }, ]; return (
{tabs.map((t) => { const Icon = t.icon; return (
{t.label} {t.count}
); })}
); }; const Body: React.FC<{ frame: number; fps: number }> = ({ frame, fps }) => { const o = interpolate(frame, [fps * 0.3, fps * 0.7], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo, }); return (
{/* Column header */}
Player
Pos
Age
From
To
Fee
Status
{WORLD_TRANSFERS.map((t, i) => { const start = fps * 0.55 + i * 4; const rowO = interpolate( frame, [start, start + fps * 0.35], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }, ); const rowY = interpolate( frame, [start, start + fps * 0.35], [12, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: eo }, ); return ( ); })}
); }; const TransferRow: React.FC<{ t: (typeof WORLD_TRANSFERS)[number]; opacity: number; translateY: number; }> = ({ t, opacity, translateY }) => { const statusMeta = { accepted: { Icon: CheckCircle2, className: "text-emerald-400 bg-emerald-500/10 border-emerald-500/25" }, pending: { Icon: Clock, className: "text-amber-400 bg-amber-500/10 border-amber-500/25" }, negotiating: { Icon: TrendingUp, className: "text-primary bg-primary/10 border-primary/30 glow-primary-sm" }, rejected: { Icon: XCircle, className: "text-destructive bg-destructive/10 border-destructive/25" }, }[t.status]; const StatusIcon = statusMeta.Icon; const posColor: Record = { GK: "text-chart-4", DEF: "text-blue-400", MID: "text-primary", FWD: "text-destructive", }; return (
{t.playerName .split(" ") .map((s) => s[0]) .join("") .slice(0, 2)}
{t.playerName} €{(Math.round(parseInt(t.fee.replace(/[^0-9]/g, "")) * 0.85)).toFixed(0)}M valuation
{t.position}
{t.age}
{t.from}
{t.to}
{t.fee}
{t.status}
); }; const OfferToast: React.FC<{ opacity: number }> = ({ opacity }) => (
Offer received
Arsenal bid €22M for Ceballos
);