live blog implemented

2026-01-29 04:01:55 +01:00
1 parent e8893c1aae
commit 0351726eeb
@@ -0,0 +1,72 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import * as api from '@/lib/api'
+
+export function ArticlesComponent() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['articles'],
+    queryFn: () => api.fetchArticles({ status: 'published' }),
+  })
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">Loading articles...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg text-red-500">Error loading articles</div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Articles</h1>
+        <p className="text-muted-foreground">Latest news and articles</p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {data?.data.map((article) => (
+              <Link
+                key={article.id}
+                to={`/articles/${article.id}`}
+                className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow cursor-pointer block"
+              >
+            <h2 className="text-xl font-semibold mb-2 line-clamp-2">
+              {article.title}
+            </h2>
+            {article.excerpt && (
+              <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
+                {article.excerpt}
+              </p>
+            )}
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>
+                {new Date(article.createdAt).toLocaleDateString('mk-MK', {
+                  day: 'numeric',
+                  month: 'short',
+                  year: 'numeric',
+                })}
+              </span>
+              <span>{article.views} views</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {data?.data.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-muted-foreground text-lg">
+            No articles published yet. Check back soon!
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}