hero section added
hero article menagment implemented in admin UI
This commit is contained in:
dimitar committed
1 parent
6d65d5975c
commit
add12b2fbf
10 files changed
+604
-217
No files matched your search
@@ -0,0 +1,193 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import { fetchPinnedLiveBlogs } from '@/lib/api';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Calendar, Eye, MessageSquare, Pin } from 'lucide-react';
|
||||
|
||||
export function PinnedLiveBlogsSidebar() {
|
||||
const { data: liveBlogs, isLoading, error } = useQuery({
|
||||
queryKey: ['pinned-live-blogs'],
|
||||
queryFn: fetchPinnedLiveBlogs,
|
||||
});
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'live':
|
||||
return (
|
||||
<Badge variant="default" className="bg-green-500 hover:bg-green-600">
|
||||
LIVE
|
||||
</Badge>
|
||||
);
|
||||
case 'ended':
|
||||
return (
|
||||
<Badge variant="outline" className="border-gray-400 text-gray-400">
|
||||
ENDED
|
||||
</Badge>
|
||||
);
|
||||
case 'archived':
|
||||
return (
|
||||
<Badge variant="outline" className="border-gray-500 text-gray-500">
|
||||
ARCHIVED
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Badge variant="outline">DRAFT</Badge>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('mk-MK', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Pin className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="animate-pulse">
|
||||
<div className="h-4 bg-muted rounded w-3/4 mb-2"></div>
|
||||
<div className="h-3 bg-muted rounded w-1/2"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Pin className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
|
||||
</div>
|
||||
<div className="text-center py-4">
|
||||
<div className="text-red-500 text-sm mb-2">Error loading live blogs</div>
|
||||
<Button variant="outline" size="sm" onClick={() => window.location.reload()}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!liveBlogs || liveBlogs.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<Pin className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
|
||||
</div>
|
||||
<div className="text-center py-6">
|
||||
<div className="text-muted-foreground mb-2">No pinned live blogs</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Pin live blogs from the admin panel to feature them here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border bg-card p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Pin className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-lg font-semibold">Pinned Live Blogs</h3>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{liveBlogs.length} pinned
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Live Blogs List */}
|
||||
<div className="space-y-4">
|
||||
{liveBlogs.map((liveBlog) => (
|
||||
<Link
|
||||
key={liveBlog.id}
|
||||
to={`/live-blogs/${liveBlog.id}`}
|
||||
className="block group"
|
||||
>
|
||||
<div className="p-4 rounded-lg border hover:border-primary/50 hover:bg-accent/50 transition-colors group-hover:shadow-sm">
|
||||
{/* Title and Status */}
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h4 className="font-medium line-clamp-2 group-hover:text-primary transition-colors">
|
||||
{liveBlog.title}
|
||||
</h4>
|
||||
{getStatusBadge(liveBlog.status)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{liveBlog.description && (
|
||||
<p className="text-sm text-muted-foreground mb-3 line-clamp-2">
|
||||
{liveBlog.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Meta Information */}
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
<span>{formatDate(liveBlog.createdAt)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Eye className="h-3 w-3" />
|
||||
<span>{liveBlog.viewCount} views</span>
|
||||
</div>
|
||||
|
||||
{liveBlog.updates && liveBlog.updates.length > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
<span>{liveBlog.updates.length} updates</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{liveBlog.author && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
by {liveBlog.author.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Featured Image (small) */}
|
||||
{liveBlog.featuredImage && (
|
||||
<div className="mt-3">
|
||||
<div className="relative h-20 rounded-md overflow-hidden">
|
||||
<img
|
||||
src={liveBlog.featuredImage}
|
||||
alt={liveBlog.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* View All Link */}
|
||||
<div className="mt-6 pt-6 border-t">
|
||||
<Link to="/live-blogs" className="block">
|
||||
<Button variant="outline" className="w-full justify-center">
|
||||
View All Live Blogs
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user