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

Add a visual sparkle effect for new news updates on the Erling Haaland media outlet

Browse Source 
Introduces a new API endpoint `/api/articles` and implements a client-side animation to visually alert users of new articles on the 'erling-haaland' outlet using CSS keyframes and conditional rendering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d9e77062-eeec-4c95-9131-905f69a78072
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/d9e77062-eeec-4c95-9131-905f69a78072/VftcvwB
This commit is contained in:
kimjaehyeon0101
2025-10-01 06:07:35 +00:00
parent b5e8cf3d3a
commit 0eee17a43e
5 changed files with 86 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,6 +74,7 @@ export default function MainContent() {
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'
@ -87,13 +88,36 @@ export default function MainContent() {
>
{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">
<Badge className={`bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse ${showSpecialEffect ? 'animate-glow-pulse' : ''}`}>
<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 ${isErlingHaaland ? 'animate-shake' : ''}`}>
<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 ${