96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { Newspaper, ExternalLink } from "lucide-react";
|
|
|
|
interface NewsItem {
|
|
title: string;
|
|
link: string;
|
|
source: string;
|
|
pubDate: string;
|
|
}
|
|
|
|
const VISIBLE_COUNT = 5;
|
|
|
|
export function NewsWidget() {
|
|
const { data: news, isLoading } = useQuery<NewsItem[]>({
|
|
queryKey: ["/api/news-feed"],
|
|
});
|
|
|
|
const [offset, setOffset] = useState(0);
|
|
const [paused, setPaused] = useState(false);
|
|
|
|
const items = news || [];
|
|
const total = items.length;
|
|
|
|
const advance = useCallback(() => {
|
|
if (total <= VISIBLE_COUNT) return;
|
|
setOffset((o) => (o + 1) % total);
|
|
}, [total]);
|
|
|
|
useEffect(() => {
|
|
if (paused || total <= VISIBLE_COUNT) return;
|
|
const timer = setInterval(advance, 5000);
|
|
return () => clearInterval(timer);
|
|
}, [paused, advance, total]);
|
|
|
|
const visible: NewsItem[] = [];
|
|
for (let i = 0; i < Math.min(VISIBLE_COUNT, total); i++) {
|
|
visible.push(items[(offset + i) % total]);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="bg-card rounded-lg border border-card-border overflow-hidden h-full flex flex-col min-h-[320px]"
|
|
onMouseEnter={() => setPaused(true)}
|
|
onMouseLeave={() => setPaused(false)}
|
|
data-testid="widget-news"
|
|
>
|
|
<div className="p-3 flex items-center gap-2 border-b border-card-border flex-shrink-0">
|
|
<Newspaper className="w-4 h-4 text-primary" />
|
|
<h3 className="font-bold text-card-foreground text-sm">Musiknachrichten</h3>
|
|
</div>
|
|
<div className="p-3 flex-1 flex flex-col justify-between">
|
|
{visible.map((item, i) => (
|
|
<a
|
|
key={`${offset}-${i}`}
|
|
href={item.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block group cursor-pointer"
|
|
data-testid={`link-news-${i}`}
|
|
>
|
|
<div className="flex items-start gap-2">
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">
|
|
{item.title}
|
|
</h4>
|
|
<div className="flex items-center gap-1.5 mt-1">
|
|
<span className="text-[10px] text-primary font-medium">{item.source}</span>
|
|
<span className="text-[10px] text-muted-foreground">{item.pubDate}</span>
|
|
</div>
|
|
</div>
|
|
<ExternalLink className="w-3 h-3 text-muted-foreground flex-shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</div>
|
|
{i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-2 mb-2" />}
|
|
</a>
|
|
))}
|
|
{isLoading && (
|
|
<div className="space-y-3 flex-1">
|
|
{Array.from({ length: VISIBLE_COUNT }).map((_, i) => (
|
|
<div key={i} className="space-y-1.5">
|
|
<div className="h-3 bg-muted animate-pulse rounded w-full" />
|
|
<div className="h-3 bg-muted animate-pulse rounded w-3/4" />
|
|
<div className="h-2 bg-muted animate-pulse rounded w-1/3 mt-1" />
|
|
{i < VISIBLE_COUNT - 1 && <div className="border-b border-card-border mt-3" />}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{!isLoading && total === 0 && (
|
|
<p className="text-xs text-muted-foreground text-center py-2">Keine Nachrichten verfügbar</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|