pwa ready
This commit is contained in:
dimitar committed
1 parent
83c60ce40d
commit
f1f16a80a5
95 files changed
+24537
No files matched your search
@@ -0,0 +1,213 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import { useActiveLiveBlogs } from '@/queries/live-blogs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Play, Pause, ChevronRight, Radio } from 'lucide-react';
|
||||
|
||||
interface LiveBlogTickerProps {
|
||||
className?: string;
|
||||
maxItems?: number;
|
||||
autoScroll?: boolean;
|
||||
scrollSpeed?: number;
|
||||
}
|
||||
|
||||
export function LiveBlogTicker({
|
||||
className = '',
|
||||
maxItems = 10,
|
||||
autoScroll = true,
|
||||
scrollSpeed = 30
|
||||
}: LiveBlogTickerProps) {
|
||||
const { data: activeBlogs, isLoading } = useActiveLiveBlogs();
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const [scrollPosition, setScrollPosition] = useState(0);
|
||||
const tickerRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const animationRef = useRef<number | undefined>(undefined);
|
||||
|
||||
const [totalWidth, setTotalWidth] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (contentRef.current) {
|
||||
const width = contentRef.current.scrollWidth;
|
||||
setTotalWidth(width);
|
||||
}
|
||||
}, [activeBlogs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoScroll || isPaused || !activeBlogs || activeBlogs.length === 0) {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let lastTime: number;
|
||||
const animate = (time: number) => {
|
||||
if (!lastTime) lastTime = time;
|
||||
const delta = time - lastTime;
|
||||
lastTime = time;
|
||||
|
||||
setScrollPosition(prev => {
|
||||
let newPos = prev + (scrollSpeed * delta) / 1000;
|
||||
|
||||
if (newPos > totalWidth) {
|
||||
newPos = -(tickerRef.current?.offsetWidth || 0);
|
||||
}
|
||||
|
||||
return newPos;
|
||||
});
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
};
|
||||
}, [autoScroll, isPaused, activeBlogs, scrollSpeed, totalWidth]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className={`border-brutal-sm bg-card p-3 ${className}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="animate-pulse h-4 w-24 bg-muted rounded"></div>
|
||||
</div>
|
||||
<div className="animate-pulse h-8 w-20 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!activeBlogs || activeBlogs.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const displayBlogs = activeBlogs.slice(0, maxItems);
|
||||
|
||||
const handlePauseToggle = () => {
|
||||
setIsPaused(!isPaused);
|
||||
};
|
||||
|
||||
const handleBlogClick = () => {
|
||||
setScrollPosition(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`border-brutal-sm bg-card overflow-hidden ${className}`}>
|
||||
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-foreground/10 bg-secondary">
|
||||
<div className="flex items-center gap-3">
|
||||
<Radio className="w-4 h-4 text-accent animate-pulse" />
|
||||
<span className="font-body text-sm font-bold uppercase tracking-wider">LIVE</span>
|
||||
<span className="px-2 py-0.5 bg-accent text-foreground text-xs font-body font-bold uppercase">
|
||||
{activeBlogs.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{autoScroll && (
|
||||
<Button
|
||||
variant="brutal"
|
||||
size="sm"
|
||||
onClick={handlePauseToggle}
|
||||
className="h-7 px-2 text-xs"
|
||||
>
|
||||
{isPaused ? (
|
||||
<Play className="w-3 h-3" />
|
||||
) : (
|
||||
<Pause className="w-3 h-3" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Link to="/live-blogs">
|
||||
<Button variant="brutal" size="sm" className="h-7 px-2 text-xs">
|
||||
Сите
|
||||
<ChevronRight className="w-3 h-3 ml-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={tickerRef}
|
||||
className="relative h-12 overflow-hidden"
|
||||
>
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="absolute top-0 left-0 h-full flex items-center whitespace-nowrap"
|
||||
style={{
|
||||
transform: `translateX(-${scrollPosition}px)`,
|
||||
transition: isPaused ? 'transform 0.3s ease' : 'none'
|
||||
}}
|
||||
>
|
||||
{displayBlogs.map((blog) => (
|
||||
<React.Fragment key={blog.id}>
|
||||
<Link
|
||||
to="/live-blogs/$slug"
|
||||
params={{ slug: blog.slug }}
|
||||
onClick={handleBlogClick}
|
||||
className="inline-flex items-center gap-2 px-4 py-1 border-r-2 border-foreground/10 hover:bg-accent transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<div className="w-2 h-2 bg-accent rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<span className="font-body text-sm font-medium group-hover:text-foreground transition-colors">
|
||||
{blog.title}
|
||||
</span>
|
||||
{blog.updates && blog.updates.length > 0 && (
|
||||
<span className="px-2 py-0.5 border border-foreground bg-background text-xs font-body">
|
||||
{blog.updates.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{displayBlogs.map((blog) => (
|
||||
<React.Fragment key={`${blog.id}-dup`}>
|
||||
<Link
|
||||
to="/live-blogs/$slug"
|
||||
params={{ slug: blog.slug }}
|
||||
onClick={handleBlogClick}
|
||||
className="inline-flex items-center gap-2 px-4 py-1 border-r-2 border-foreground/10 hover:bg-accent transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative">
|
||||
<div className="w-2 h-2 bg-accent rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<span className="font-body text-sm font-medium group-hover:text-foreground transition-colors">
|
||||
{blog.title}
|
||||
</span>
|
||||
{blog.updates && blog.updates.length > 0 && (
|
||||
<span className="px-2 py-0.5 border border-foreground bg-background text-xs font-body">
|
||||
{blog.updates.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{autoScroll && totalWidth > 0 && (
|
||||
<div className="px-4 pb-2">
|
||||
<div className="h-1 bg-foreground/10">
|
||||
<div
|
||||
className="h-full bg-accent transition-all duration-300"
|
||||
style={{
|
||||
width: `${Math.min(100, (scrollPosition / totalWidth) * 100 * 2)}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
|
||||
import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Pin,
|
||||
PinOff,
|
||||
Edit,
|
||||
Trash2,
|
||||
Clock,
|
||||
User
|
||||
} from 'lucide-react';
|
||||
|
||||
interface LiveBlogUpdateProps {
|
||||
update: ApiLiveBlogUpdate;
|
||||
isEditing?: boolean;
|
||||
onEdit?: (update: ApiLiveBlogUpdate) => void;
|
||||
onDelete?: (update: ApiLiveBlogUpdate) => void;
|
||||
onPinToggle?: (update: ApiLiveBlogUpdate) => void;
|
||||
showAdminControls?: boolean;
|
||||
}
|
||||
|
||||
export function LiveBlogUpdate({
|
||||
update,
|
||||
isEditing = false,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onPinToggle,
|
||||
showAdminControls = false,
|
||||
}: LiveBlogUpdateProps) {
|
||||
const isPinned = update.isPinned;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'relative p-4 rounded-lg border transition-all duration-200',
|
||||
isPinned && 'border-primary bg-primary/5 shadow-sm',
|
||||
!isPinned && 'border-border hover:border-muted-foreground/20'
|
||||
)}
|
||||
>
|
||||
{/* Pinned indicator */}
|
||||
{isPinned && (
|
||||
<div className="absolute -top-2 -left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<Pin className="w-3 h-3" />
|
||||
Pinned
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Admin controls */}
|
||||
{showAdminControls && (
|
||||
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onPinToggle?.(update)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
{isPinned ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onEdit?.(update)}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDelete?.(update)}
|
||||
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{update.author ? (
|
||||
<>
|
||||
{update.author.avatar ? (
|
||||
<img
|
||||
src={update.author.avatar}
|
||||
alt={update.author.name}
|
||||
className="w-8 h-8 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center">
|
||||
<User className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className="font-medium text-sm">{update.author.name}</div>
|
||||
{update.author.slug && (
|
||||
<div className="text-xs text-muted-foreground">@{update.author.slug}</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<User className="w-4 h-4" />
|
||||
<span className="text-sm">Anonymous</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{new Date(update.createdAt).toLocaleTimeString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Update content */}
|
||||
<div className="prose prose-sm max-w-none">
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
defaultValue={update.content}
|
||||
className="w-full p-2 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
rows={3}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{update.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scheduled indicator */}
|
||||
{update.scheduledAt && new Date(update.scheduledAt) > new Date() && (
|
||||
<div className="mt-2 text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Scheduled for: {new Date(update.scheduledAt).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Update metadata */}
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
ID: {update.id.slice(0, 8)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
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';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface LiveBlogViewerProps {
|
||||
slug: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LiveBlogViewer({ slug, className }: LiveBlogViewerProps) {
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const [newUpdatesCount, setNewUpdatesCount] = useState(0);
|
||||
const [isScrolledUp, setIsScrolledUp] = useState(false);
|
||||
|
||||
const updatesContainerRef = useRef<HTMLDivElement>(null);
|
||||
const lastUpdateCountRef = useRef(0);
|
||||
|
||||
const { data: liveBlog, isLoading: blogLoading, error: blogError } = useLiveBlog(slug);
|
||||
const {
|
||||
data: updatesData,
|
||||
isLoading: updatesLoading,
|
||||
refetch: refetchUpdates
|
||||
} = useLiveBlogUpdates(liveBlog?.id || '', 1, 100);
|
||||
|
||||
const {
|
||||
isConnected,
|
||||
lastEvent,
|
||||
connectionError,
|
||||
reconnectAttempts,
|
||||
connect
|
||||
} = useLiveBlogStream(liveBlog?.id || '');
|
||||
|
||||
const scrollToBottom = useCallback(() => {
|
||||
if (updatesContainerRef.current && autoScroll) {
|
||||
const container = updatesContainerRef.current;
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}, [autoScroll]);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (!updatesContainerRef.current) return;
|
||||
|
||||
const container = updatesContainerRef.current;
|
||||
const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 50;
|
||||
|
||||
setIsScrolledUp(!isAtBottom);
|
||||
|
||||
if (isAtBottom) {
|
||||
setNewUpdatesCount(0);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleAutoScrollToggle = useCallback(() => {
|
||||
setAutoScroll(!autoScroll);
|
||||
if (!autoScroll) {
|
||||
scrollToBottom();
|
||||
setNewUpdatesCount(0);
|
||||
}
|
||||
}, [autoScroll, scrollToBottom]);
|
||||
|
||||
const showNewUpdates = useCallback(() => {
|
||||
setNewUpdatesCount(0);
|
||||
scrollToBottom();
|
||||
setIsScrolledUp(false);
|
||||
}, [scrollToBottom]);
|
||||
|
||||
// Handle new updates from SSE
|
||||
useEffect(() => {
|
||||
if (lastEvent?.type === 'update') {
|
||||
const handleUpdate = () => {
|
||||
refetchUpdates();
|
||||
|
||||
if (autoScroll && !isScrolledUp) {
|
||||
// Add a small delay to ensure the update is in the DOM
|
||||
setTimeout(() => {
|
||||
scrollToBottom();
|
||||
}, 100);
|
||||
} else if (!autoScroll || isScrolledUp) {
|
||||
setNewUpdatesCount(prev => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
handleUpdate();
|
||||
}
|
||||
}, [lastEvent, autoScroll, isScrolledUp, refetchUpdates, scrollToBottom]);
|
||||
|
||||
// Initial scroll to bottom when data loads
|
||||
useEffect(() => {
|
||||
if (updatesData?.data && updatesData.data.length > 0) {
|
||||
const currentUpdateCount = updatesData.data.length;
|
||||
|
||||
// Only auto-scroll if this is the initial load or user is at bottom
|
||||
if (currentUpdateCount > lastUpdateCountRef.current && !isScrolledUp) {
|
||||
setTimeout(scrollToBottom, 100);
|
||||
}
|
||||
|
||||
lastUpdateCountRef.current = currentUpdateCount;
|
||||
}
|
||||
}, [updatesData, scrollToBottom, isScrolledUp]);
|
||||
|
||||
if (blogLoading) {
|
||||
return (
|
||||
<Card className={cn('w-full max-w-4xl mx-auto', className)}>
|
||||
<CardContent className="p-6">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-8 bg-muted rounded w-3/4"></div>
|
||||
<div className="h-4 bg-muted rounded w-1/2"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-16 bg-muted rounded"></div>
|
||||
<div className="h-16 bg-muted rounded"></div>
|
||||
<div className="h-16 bg-muted rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (blogError || !liveBlog) {
|
||||
return (
|
||||
<Card className={cn('w-full max-w-4xl mx-auto', className)}>
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center text-destructive">
|
||||
<h3 className="text-lg font-semibold mb-2">Failed to load live blog</h3>
|
||||
<p className="text-sm">
|
||||
{blogError instanceof Error ? blogError.message : 'Unknown error occurred'}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const updates = updatesData?.data || [];
|
||||
const isLive = liveBlog.status === 'live';
|
||||
|
||||
return (
|
||||
<Card className={cn('w-full max-w-4xl mx-auto', className)}>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-2xl mb-2">{liveBlog.title}</CardTitle>
|
||||
{liveBlog.description && (
|
||||
<p className="text-muted-foreground">{liveBlog.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={cn(
|
||||
'w-2 h-2 rounded-full',
|
||||
isLive ? 'bg-green-500' : 'bg-gray-400'
|
||||
)} />
|
||||
<span>{isLive ? 'Live' : 'Ended'}</span>
|
||||
</div>
|
||||
{isLive && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={cn(
|
||||
'w-2 h-2 rounded-full',
|
||||
isConnected ? 'bg-green-500' : 'bg-red-500'
|
||||
)} />
|
||||
<span>
|
||||
{isConnected ? 'Connected' : `Reconnecting... (${reconnectAttempts})`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span>{liveBlog.viewCount} views</span>
|
||||
<span>{updates.length} updates</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant={autoScroll ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={handleAutoScrollToggle}
|
||||
>
|
||||
{autoScroll ? 'Auto-scroll ON' : 'Auto-scroll OFF'}
|
||||
</Button>
|
||||
{!isConnected && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={connect}
|
||||
>
|
||||
Reconnect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
{connectionError && (
|
||||
<div className="m-6 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-destructive">
|
||||
{connectionError}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={connect}
|
||||
>
|
||||
Try Again
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={updatesContainerRef}
|
||||
className="px-6 pb-6"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{updates.length === 0 && !updatesLoading ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<p>No updates yet. Check back soon!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{updates.map((update) => (
|
||||
<LiveBlogUpdate key={update.id} update={update} />
|
||||
))}
|
||||
{updatesLoading && (
|
||||
<div className="animate-pulse">
|
||||
<div className="h-16 bg-muted rounded"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New updates indicator */}
|
||||
{isScrolledUp && newUpdatesCount > 0 && (
|
||||
<div className="sticky bottom-0 bg-background border-t p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{newUpdatesCount} new {newUpdatesCount === 1 ? 'update' : 'updates'}
|
||||
</span>
|
||||
<Button size="sm" onClick={showNewUpdates}>
|
||||
Show Updates
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface LiveBlogUpdateProps {
|
||||
update: ApiLiveBlogUpdate;
|
||||
}
|
||||
|
||||
function LiveBlogUpdate({ update }: LiveBlogUpdateProps) {
|
||||
const isPinned = update.isPinned;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'relative p-4 rounded-lg border',
|
||||
isPinned && 'border-primary bg-primary/5'
|
||||
)}
|
||||
>
|
||||
{isPinned && (
|
||||
<div className="absolute -top-2 -left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">
|
||||
Pinned
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{update.author && (
|
||||
<>
|
||||
{update.author.avatar && (
|
||||
<img
|
||||
src={update.author.avatar}
|
||||
alt={update.author.name}
|
||||
className="w-6 h-6 rounded-full"
|
||||
/>
|
||||
)}
|
||||
<span className="text-sm font-medium">{update.author.name}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(update.createdAt).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm leading-relaxed whitespace-pre-wrap">
|
||||
{update.content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
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,
|
||||
Eye,
|
||||
Pin,
|
||||
Play,
|
||||
Square,
|
||||
ChevronRight
|
||||
} from 'lucide-react';
|
||||
|
||||
interface PinnedLiveBlogSidebarProps {
|
||||
className?: string;
|
||||
maxItems?: number;
|
||||
}
|
||||
|
||||
export function PinnedLiveBlogSidebar({
|
||||
className = '',
|
||||
maxItems = 3
|
||||
}: PinnedLiveBlogSidebarProps) {
|
||||
const { data: pinnedBlogs, isLoading, error } = usePinnedLiveBlogs();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Pin className="w-4 h-4" />
|
||||
Pinned Live Blogs
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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) {
|
||||
case 'live': return 'bg-green-100 text-green-800 border-green-200';
|
||||
case 'ended': return 'bg-red-100 text-red-800 border-red-200';
|
||||
default: return 'bg-gray-100 text-gray-800 border-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'live': return <Play className="w-3 h-3" />;
|
||||
case 'ended': return <Square className="w-3 h-3" />;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
|
||||
if (diffMins < 60) {
|
||||
return `${diffMins}m ago`;
|
||||
} else if (diffMins < 1440) {
|
||||
return `${Math.floor(diffMins / 60)}h ago`;
|
||||
} else {
|
||||
return `${Math.floor(diffMins / 1440)}d ago`;
|
||||
}
|
||||
};
|
||||
|
||||
const getLatestUpdate = (blog: LiveBlog) => {
|
||||
if (!blog.updates || blog.updates.length === 0) return null;
|
||||
return blog.updates[blog.updates.length - 1];
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Pin className="w-4 h-4" />
|
||||
Live Coverage
|
||||
</CardTitle>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{(pinnedBlogs || []).length} pinned
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<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} updates</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="w-3 h-3" />
|
||||
<span>{blog.viewCount} views</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user