aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add distinct animations and styling to media outlet cards

Browse Source 
Introduce conditional styling and animations to media outlet cards based on article count and specific outlet slugs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f8b8f0ea-e52e-4118-9b6b-e44184e17203
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
kimjaehyeon0101
2025-10-01 05:47:18 +00:00
parent 52ccfc324c
commit 7c5025ee10
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/MainContent.tsx
View File

@ -73,13 +73,20 @@ export default function MainContent() {
const renderOutletCard = (outlet: MediaOutlet) => {
const articleCount = articleCountByOutlet[outlet.id] || 0;
const hasArticles = articleCount > 0;
const isErlingHaaland = outlet.slug === 'erling-haaland';
const animationClass = isErlingHaaland && hasArticles
? 'animate-float-shake ring-2 ring-blue-400/30 shadow-lg'
: isErlingHaaland
? 'animate-shake'
: hasArticles
? 'animate-float ring-2 ring-blue-400/30 shadow-lg'
: '';
return (
<Card
key={outlet.id}
className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${
hasArticles ? 'animate-float ring-2 ring-blue-400/30 shadow-lg' : ''
}`}
className={`hover:shadow-md transition-all cursor-pointer bg-white relative ${animationClass}`}
data-testid={`card-outlet-${outlet.id}`}
>
{hasArticles && (