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

Adjust visual effects on media outlet cards to highlight new content

Browse Source 
Remove confetti animation from 'Erling Haaland' media outlet and apply float animation to the 'NEW' badge, while removing hover animation from the media outlet image.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/X7hAtXn
This commit is contained in:
kimjaehyeon0101
2025-10-14 00:54:38 +00:00
parent 6b654ea3e8
commit 8359c5914c
1 changed files with 3 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,56 +81,25 @@ 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 showSpecialEffect = isErlingHaaland && hasArticles;
const animationClass = 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 ${animationClass}`}
className="hover:shadow-md transition-all cursor-pointer bg-white relative"
data-testid={`card-outlet-${outlet.id}`}
>
{hasArticles && (
<div className="absolute -top-2 -right-2 z-10">
<Badge className={`bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse ${showSpecialEffect ? 'animate-glow-pulse' : ''}`}>
<Badge className="bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-float">
<Sparkles className="h-3 w-3 mr-1" />
NEW
</Badge>
{showSpecialEffect && (
<div className="absolute inset-0 pointer-events-none" data-testid="sparkle-effect-erling">
{[...Array(6)].map((_, i) => {
const angle = (i * 60) * Math.PI / 180;
const distance = 20 + (i % 2) * 10;
const x = Math.cos(angle) * distance;
const y = Math.sin(angle) * distance;
const delay = i * 0.2;
return (
<div
key={i}
className="absolute top-1/2 left-1/2 w-2 h-2 rounded-full bg-gradient-to-r from-yellow-400 to-pink-500"
style={{
animation: `sparkle 2s ease-in-out ${delay}s infinite`,
['--sparkle-x' as any]: `${x}px`,
['--sparkle-y' as any]: `${y}px`,
}}
/>
);
})}
</div>
)}
</div>
)}
<CardContent className="p-2">
<div className="flex items-center space-x-2">
<div
className={`w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all ${
hasArticles ? 'ring-2 ring-blue-400/50' : ''
}`}
className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
onClick={(e) => {
e.stopPropagation();
if (outlet.imageUrl) {