49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
||
import { Link } from '@tanstack/react-router'
|
||
import * as api from '@/lib/api'
|
||
import { Zap } from 'lucide-react'
|
||
|
||
export function ArticleTicker() {
|
||
const { data } = useQuery({
|
||
queryKey: ['ticker-articles'],
|
||
queryFn: () => api.fetchArticles({ status: 'published', limit: 10 }),
|
||
})
|
||
|
||
const articles = data?.data.slice(0, 10) || []
|
||
|
||
if (articles.length === 0) return null
|
||
|
||
return (
|
||
<div className="overflow-hidden bg-foreground text-background border-b-4 border-accent">
|
||
<div className="py-2 flex items-center">
|
||
<div className="flex-shrink-0 px-4 py-1 bg-accent text-foreground font-body text-sm font-bold uppercase tracking-wider flex items-center gap-2 border-r-4 border-background z-10">
|
||
<Zap className="w-4 h-4" />
|
||
Топ вести
|
||
</div>
|
||
<div className="overflow-hidden flex-1">
|
||
<div className="flex animate-marquee whitespace-nowrap">
|
||
{articles.map((article, index) => (
|
||
<Link
|
||
key={`${article.id}-${index}`}
|
||
to={`/articles/${article.id}`}
|
||
className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
|
||
>
|
||
{article.title || 'No title'}
|
||
</Link>
|
||
))}
|
||
{articles.map((article, index) => (
|
||
<Link
|
||
key={`dup-${article.id}-${index}`}
|
||
to={`/articles/${article.id}`}
|
||
className="font-body text-sm uppercase tracking-wider text-background/80 hover:text-accent hover:bg-background/10 inline-block px-6 py-1 border-r border-background/20 transition-colors"
|
||
>
|
||
{article.title || 'No title'}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|