admin dashboard
This commit is contained in:
dimitar committed
1 parent
2ff76ffda5
commit
7c7bb45446
15 files changed
+440
-116
No files matched your search
@@ -23,7 +23,7 @@ export function LiveBlogTicker({
|
||||
const [scrollPosition, setScrollPosition] = useState(0);
|
||||
const tickerRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const animationRef = useRef<number>();
|
||||
const animationRef = useRef<number | undefined>(undefined);
|
||||
|
||||
// Calculate total width needed for scrolling
|
||||
const [totalWidth, setTotalWidth] = useState(0);
|
||||
@@ -55,7 +55,7 @@ export function LiveBlogTicker({
|
||||
|
||||
// Reset when scrolled past content
|
||||
if (newPos > totalWidth) {
|
||||
newPos = -tickerRef.current?.offsetWidth || 0;
|
||||
newPos = -(tickerRef.current?.offsetWidth || 0);
|
||||
}
|
||||
|
||||
return newPos;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useLiveBlogStream } from '@/hooks/useLiveBlogStream';
|
||||
import { useLiveBlog, useLiveBlogUpdates } from '@/queries/live-blogs';
|
||||
import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import { usePinnedLiveBlogs } from '@/queries/live-blogs';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { LiveBlog } from '@/lib/api';
|
||||
import {
|
||||
Clock,
|
||||
MessageSquare,
|
||||
@@ -49,11 +49,49 @@ export function PinnedLiveBlogSidebar({
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !pinnedBlogs || pinnedBlogs.length === 0) {
|
||||
return null; // Don't show sidebar if no pinned blogs
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Pin className="w-4 h-4" />
|
||||
Live Coverage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="animate-pulse space-y-2">
|
||||
<div className="h-4 bg-muted rounded w-3/4"></div>
|
||||
<div className="h-3 bg-muted rounded w-1/2"></div>
|
||||
<div className="h-2 bg-muted rounded w-1/4"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const displayBlogs = pinnedBlogs.slice(0, maxItems);
|
||||
if (error) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Pin className="w-4 h-4" />
|
||||
Live Coverage
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground text-center py-4">
|
||||
Error loading live coverage
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const displayBlogs = (pinnedBlogs || []).slice(0, maxItems);
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
@@ -99,99 +137,100 @@ export function PinnedLiveBlogSidebar({
|
||||
<Pin className="w-4 h-4" />
|
||||
Live Coverage
|
||||
</CardTitle>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{pinnedBlogs.length} pinned
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{(pinnedBlogs || []).length} pinned
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-0">
|
||||
<div className="space-y-4">
|
||||
{displayBlogs.map((blog) => {
|
||||
const latestUpdate = getLatestUpdate(blog);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={blog.id}
|
||||
to="/live-blogs/$slug"
|
||||
params={{ slug: blog.slug }}
|
||||
className="block group"
|
||||
>
|
||||
<div className="p-3 rounded-lg border hover:border-primary/50 hover:bg-accent/50 transition-colors">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-medium text-sm leading-tight group-hover:text-primary transition-colors line-clamp-2">
|
||||
{blog.title}
|
||||
</h3>
|
||||
|
||||
{blog.description && (
|
||||
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
{blog.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
className={getStatusColor(blog.status)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
{getStatusIcon(blog.status)}
|
||||
{blog.status}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Latest update preview */}
|
||||
{latestUpdate && (
|
||||
<div className="mt-2 p-2 bg-muted/50 rounded text-xs">
|
||||
<div className="flex items-center gap-1 text-muted-foreground mb-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{formatTime(latestUpdate.createdAt)}</span>
|
||||
</div>
|
||||
<p className="line-clamp-2">{latestUpdate.content}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center justify-between mt-3 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{blog.viewCount}</span>
|
||||
<CardContent className="pt-0">
|
||||
{displayBlogs.length === 0 ? (
|
||||
<div className="py-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No pinned live blogs at the moment
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Check back later for live coverage
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{displayBlogs.map((blog) => {
|
||||
const latestUpdate = getLatestUpdate(blog);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={blog.id}
|
||||
to="/live-blogs/$slug"
|
||||
params={{ slug: blog.slug }}
|
||||
className="block p-3 rounded-lg border hover:bg-accent/50 transition-colors group"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-sm mb-1 group-hover:text-primary transition-colors line-clamp-2">
|
||||
{blog.title}
|
||||
</h4>
|
||||
{blog.description && (
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">
|
||||
{blog.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
className={`${getStatusColor(blog.status)} text-xs`}
|
||||
variant="outline"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
{getStatusIcon(blog.status)}
|
||||
{blog.status}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Latest update preview */}
|
||||
{latestUpdate && (
|
||||
<div className="mt-2 p-2 bg-muted/50 rounded text-xs">
|
||||
<div className="flex items-center gap-1 text-muted-foreground mb-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{formatTime(latestUpdate.createdAt)}</span>
|
||||
</div>
|
||||
<p className="line-clamp-2">{latestUpdate.content}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<MessageSquare className="w-3 h-3" />
|
||||
<span>{blog.updates?.length || 0}</span>
|
||||
<span>{blog.updates?.length || 0} updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{blog.viewCount} views</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-primary">
|
||||
<span className="text-xs">View live</span>
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{pinnedBlogs.length > maxItems && (
|
||||
<div className="mt-4 pt-3 border-t">
|
||||
<Link
|
||||
to="/live-blogs"
|
||||
className="w-full"
|
||||
>
|
||||
<Button variant="ghost" size="sm" className="w-full justify-between">
|
||||
<span>View all pinned blogs</span>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
{/* View all button */}
|
||||
{(pinnedBlogs || []).length > maxItems && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full mt-4"
|
||||
asChild
|
||||
>
|
||||
<Link to="/live-blogs">
|
||||
View all pinned blogs
|
||||
<ChevronRight className="w-3 h-3 ml-1" />
|
||||
</Link>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in new issue
Block a user