e8e4981465
* Add opencode oxlint plugin and UI refinements - Add .opencode/plugins/oxlint.ts to run oxlint automatically on file edits - Refactor RankingDisplay into shared StatHelpers component - Add tied rank display support in home loader - Update navbar with NavLink for active state styling - Replace .reverse() with .toReversed() in RecentPicksFeed * Remove unused RankChangeIndicator import in LeagueRow
56 lines
2 KiB
TypeScript
56 lines
2 KiB
TypeScript
import { memo, useEffect, useRef, useState } from "react";
|
|
|
|
type Pick = {
|
|
id: string;
|
|
pickNumber: number;
|
|
participant: { name: string };
|
|
sport: { name: string };
|
|
team: { name: string };
|
|
};
|
|
|
|
export const RecentPicksFeed = memo(function RecentPicksFeed({ picks }: { picks: Pick[] }) {
|
|
const recentPicks = picks.slice(-3).toReversed();
|
|
const prevNewestIdRef = useRef<string | undefined>(picks.at(-1)?.id);
|
|
const [animatingId, setAnimatingId] = useState<string | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
const newest = recentPicks[0];
|
|
if (newest && newest.id !== prevNewestIdRef.current) {
|
|
prevNewestIdRef.current = newest.id;
|
|
setAnimatingId(newest.id);
|
|
const t = setTimeout(() => setAnimatingId(undefined), 450);
|
|
return () => clearTimeout(t);
|
|
}
|
|
}, [recentPicks]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1 px-3 pt-2 pb-1 overflow-hidden">
|
|
<p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 mb-0.5">Latest Picks</p>
|
|
{picks.length === 0 ? (
|
|
<p className="text-xs text-muted-foreground py-1">No picks yet</p>
|
|
) : (
|
|
recentPicks.map((pick, index) => (
|
|
<div
|
|
key={pick.id}
|
|
className={`w-full ${index === 0 && animatingId === pick.id ? "rpf-animate" : ""} bg-muted rounded-lg px-3 py-1.5 flex items-center gap-2`}
|
|
>
|
|
<span className="text-xs font-bold text-muted-foreground shrink-0 tabular-nums">
|
|
#{pick.pickNumber}
|
|
</span>
|
|
<div className="flex flex-col flex-1 min-w-0">
|
|
<span className="text-sm font-medium truncate">
|
|
{pick.participant.name}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground/70 truncate">
|
|
{pick.sport.name}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground truncate max-w-[90px] text-right shrink-0">
|
|
{pick.team.name}
|
|
</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
});
|