redesign looking good

frontend/src/components/home/PinnedLiveBlogsSidebar.tsx

@@ -1,7 +1,6 @@
 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';
 
@@ -15,25 +14,27 @@ export function PinnedLiveBlogsSidebar() {
     switch (status) {
       case 'live':
         return (
-          <Badge variant="default" className="bg-green-500 hover:bg-green-600">
+          <span className="px-2 py-0.5 bg-accent text-foreground text-xs font-body font-bold uppercase">
             LIVE
-          </Badge>
+          </span>
         );
       case 'ended':
         return (
-          <Badge variant="outline" className="border-gray-400 text-gray-400">
+          <span className="px-2 py-0.5 border-2 border-foreground/40 text-foreground/40 text-xs font-body font-bold uppercase">
             ENDED
-          </Badge>
+          </span>
         );
       case 'archived':
         return (
-          <Badge variant="outline" className="border-gray-500 text-gray-500">
+          <span className="px-2 py-0.5 border-2 border-foreground/30 text-foreground/30 text-xs font-body font-bold uppercase">
             ARCHIVED
-          </Badge>
+          </span>
         );
       default:
         return (
-          <Badge variant="outline">DRAFT</Badge>
+          <span className="px-2 py-0.5 border-2 border-foreground text-foreground text-xs font-body font-bold uppercase">
+            DRAFT
+          </span>
         );
     }
   };
@@ -48,10 +49,10 @@ export function PinnedLiveBlogsSidebar() {
 
   if (isLoading) {
     return (
-      <div className="rounded-xl border bg-card p-6">
+      <div className="border-brutal-sm 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>
+          <Pin className="h-5 w-5" />
+          <h3 className="text-xl font-display">Pinned Live</h3>
         </div>
         <div className="space-y-4">
           {[1, 2, 3].map((i) => (
@@ -67,14 +68,14 @@ export function PinnedLiveBlogsSidebar() {
 
   if (error) {
     return (
-      <div className="rounded-xl border bg-card p-6">
+      <div className="border-brutal-sm 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>
+          <Pin className="h-5 w-5" />
+          <h3 className="text-xl font-display">Pinned Live</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()}>
+          <div className="text-destructive font-body text-sm mb-2">ERROR</div>
+          <Button variant="brutal" size="sm" onClick={() => window.location.reload()}>
             Retry
           </Button>
         </div>
@@ -84,15 +85,15 @@ export function PinnedLiveBlogsSidebar() {
 
   if (!liveBlogs || liveBlogs.length === 0) {
     return (
-      <div className="rounded-xl border bg-card p-6">
+      <div className="border-brutal-sm 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>
+          <Pin className="h-5 w-5" />
+          <h3 className="text-xl font-display">Pinned Live</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.
+        <div className="text-center py-6 border-2 border-dashed border-foreground/20 p-4">
+          <div className="font-body text-muted-foreground mb-2">No pinned live blogs</div>
+          <p className="font-body text-xs text-muted-foreground">
+            Pin live blogs from the admin panel.
           </p>
         </div>
       </div>
@@ -100,44 +101,39 @@ export function PinnedLiveBlogsSidebar() {
   }
 
   return (
-    <div className="rounded-xl border bg-card p-6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
+    <div className="border-brutal-sm bg-card p-6">
+      <div className="flex items-center justify-between mb-6 pb-4 border-b-2 border-foreground/10">
         <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>
+          <Pin className="h-5 w-5 text-accent" />
+          <h3 className="text-xl font-display">Pinned Live</h3>
         </div>
-        <Badge variant="outline" className="text-xs">
-          {liveBlogs.length} pinned
-        </Badge>
+        <span className="px-2 py-1 border-2 border-foreground bg-foreground text-background text-xs font-body font-bold uppercase">
+          {liveBlogs.length}
+        </span>
       </div>
 
-      {/* Live Blogs List */}
       <div className="space-y-4">
         {liveBlogs.map((liveBlog) => (
           <Link
             key={liveBlog.id}
-            to={`/live-blogs/${liveBlog.id}`}
+            to={`/live-blogs/${liveBlog.slug}`}
             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="p-4 border-2 border-foreground/10 hover:border-foreground hover:shadow-brutal-sm transition-all duration-150 group-hover:-translate-y-1">
               <div className="flex items-start justify-between mb-2">
-                <h4 className="font-medium line-clamp-2 group-hover:text-primary transition-colors">
+                <h4 className="font-body text-sm font-bold leading-tight line-clamp-2 group-hover:text-accent transition-colors">
                   {liveBlog.title}
                 </h4>
                 {getStatusBadge(liveBlog.status)}
               </div>
 
-              {/* Description */}
               {liveBlog.description && (
-                <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                <p className="text-xs font-body 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 flex-wrap items-center gap-3 text-xs font-body text-muted-foreground">
                 <div className="flex items-center gap-1">
                   <Calendar className="h-3 w-3" />
                   <span>{formatDate(liveBlog.createdAt)}</span>
@@ -145,33 +141,31 @@ export function PinnedLiveBlogsSidebar() {
 
                 <div className="flex items-center gap-1">
                   <Eye className="h-3 w-3" />
-                  <span>{liveBlog.viewCount} views</span>
+                  <span>{liveBlog.viewCount}</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>
+                    <span>{liveBlog.updates.length}</span>
                   </div>
                 )}
 
                 {liveBlog.author && (
                   <div className="text-xs text-muted-foreground">
-                    by {liveBlog.author.name}
+                    {liveBlog.author.name}
                   </div>
                 )}
               </div>
 
-              {/* Featured Image (small) */}
               {liveBlog.featuredImage && (
                 <div className="mt-3">
-                  <div className="relative h-20 rounded-md overflow-hidden">
+                  <div className="relative h-20 border-2 border-foreground/10 overflow-hidden">
                     <img
                       src={liveBlog.featuredImage}
                       alt={liveBlog.title}
-                      className="w-full h-full object-cover"
+                      className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                     />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                   </div>
                 </div>
               )}
@@ -180,14 +174,13 @@ export function PinnedLiveBlogsSidebar() {
         ))}
       </div>
 
-      {/* View All Link */}
-      <div className="mt-6 pt-6 border-t">
+      <div className="mt-6 pt-4 border-t-2 border-foreground/10">
         <Link to="/live-blogs" className="block">
-          <Button variant="outline" className="w-full justify-center">
-            View All Live Blogs
+          <Button variant="brutal" className="w-full justify-center">
+            Сите Live
           </Button>
         </Link>
       </div>
     </div>
   );
-}
+}