diff --git a/components/TopRivalriesTicker.test.tsx b/components/TopRivalriesTicker.test.tsx index 9cf596bc9..87e4947c8 100644 --- a/components/TopRivalriesTicker.test.tsx +++ b/components/TopRivalriesTicker.test.tsx @@ -39,6 +39,32 @@ describe('TopRivalriesTicker', () => { expect(reactLabelElements.length).toBeGreaterThanOrEqual(2); }); + it('labels the default list as example comparisons', () => { + render(); + + expect(screen.getByRole('region', { name: 'Example comparisons' })).toBeInTheDocument(); + expect(screen.getByText('Example comparisons')).toBeInTheDocument(); + }); + + it('does not show example label when custom rivalries are provided', () => { + render( + null, + color: 'text-orange-500', + }, + ]} + /> + ); + + expect(screen.getByRole('region', { name: 'Top rivalries' })).toBeInTheDocument(); + expect(screen.queryByText('Example comparisons')).not.toBeInTheDocument(); + }); + it('navigates to the correct URL on click', () => { render(); diff --git a/components/TopRivalriesTicker.tsx b/components/TopRivalriesTicker.tsx index b3641ec98..9fa02fc36 100644 --- a/components/TopRivalriesTicker.tsx +++ b/components/TopRivalriesTicker.tsx @@ -68,6 +68,7 @@ export default function TopRivalriesTicker({ rivalries = MOCK_RIVALRIES, }: TopRivalriesTickerProps = {}) { const router = useRouter(); + const isExampleList = rivalries === MOCK_RIVALRIES; const handleRivalryClick = (u1: string, u2: string) => { router.push(`/compare?user1=${encodeURIComponent(u1)}&user2=${encodeURIComponent(u2)}`); @@ -76,62 +77,76 @@ export default function TopRivalriesTicker({ const items = rivalries || []; return ( -
- {/* Edge gradients for smooth fade in/out */} -
-
+
+ {isExampleList && items.length > 0 && ( +
+ + Example comparisons + +
+ )} - {/* Marquee content */} - - {items.length === 0 ? ( -
- No active rivalries -
- ) : ( - [...items, ...items].map((rivalry, idx) => { - const Icon = rivalry.icon; +
+ {/* Edge gradients for smooth fade in/out */} +
+
- return ( -
handleRivalryClick(rivalry.u1, rivalry.u2)} - className="group mx-2 flex cursor-pointer items-center gap-3 rounded-full px-6 py-1.5 transition-colors hover:bg-black/5 dark:hover:bg-white/5" - > - + {/* Marquee content */} + + {items.length === 0 ? ( +
+ No active rivalries +
+ ) : ( + [...items, ...items].map((rivalry, idx) => { + const Icon = rivalry.icon; -
- - {rivalry.u1} - + return ( +
handleRivalryClick(rivalry.u1, rivalry.u2)} + className="group mx-2 flex cursor-pointer items-center gap-3 rounded-full px-6 py-1.5 transition-colors hover:bg-black/5 dark:hover:bg-white/5" + > + - - VS - +
+ + {rivalry.u1} + + + + VS + - - {rivalry.u2} + + {rivalry.u2} + +
+ + + {rivalry.label}
- - - {rivalry.label} - -
- ); - }) - )} -
+ ); + }) + )} + +
); }