Update carousels, card hover, and IranBay branding.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-04 13:21:27 +03:30
commit 1153e8e78f
178 changed files with 30517 additions and 0 deletions
@@ -0,0 +1,163 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import { excerpt, formatDate } from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import {
+  deleteWebsiteBlogPost,
+  listWebsiteBlogPosts,
+  type WebsiteBlogPost,
+} from "@/services/website-blog";
+import styles from "./WebsiteBlogListPage.module.css";
+
+export default function WebsiteBlogListPage() {
+  const [items, setItems] = useState<WebsiteBlogPost[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [removing, setRemoving] = useState<WebsiteBlogPost | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const data = await listWebsiteBlogPosts();
+        if (!cancelled) setItems(data.items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load blog posts.",
+          );
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteWebsiteBlogPost(removing.id);
+      setItems((prev) => prev.filter((item) => item.id !== removing.id));
+      setRemoving(null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not remove blog post.",
+      );
+      setRemoving(null);
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+            <Link href="/">Home</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={styles.breadcrumbCurrent}>Blog</span>
+          </nav>
+          <h1 className={styles.title}>Blog</h1>
+          <p className={styles.lead}>
+            Stories published on the IranBay website.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          <p className={styles.count}>
+            {loading ? "Loading…" : `${items.length} posts`}
+          </p>
+          <Link href="/website/blog/new" className={`outline-btn ${styles.addBtn}`}>
+            Add
+          </Link>
+        </div>
+      </header>
+
+      {error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      {loading && items.length === 0 ? (
+        <p className={styles.hint}>Loading blog…</p>
+      ) : null}
+
+      {!loading && items.length === 0 ? (
+        <CatalogEmptyState
+          icon="/images/icons/gallery.svg"
+          title="No blog posts yet"
+          lead="Add the first story for the website."
+          actionHref="/website/blog/new"
+          actionLabel="Add"
+        />
+      ) : null}
+
+      {items.length ? (
+        <div className={styles.grid}>
+          {items.map((post) => {
+            const text = post.abstract ? excerpt(post.abstract, 160) : "";
+            return (
+              <article key={post.id} className={styles.card}>
+                <div className={styles.media}>
+                  {post.imageUrl ? (
+                    <img src={post.imageUrl} alt="" />
+                  ) : (
+                    <div className={styles.fallback} aria-hidden />
+                  )}
+                </div>
+                <div className={`tile-hover ${styles.foot}`}>
+                  <div className={styles.body}>
+                    <p className={styles.category}>{post.categoryName}</p>
+                    <h2 dir="auto">{post.title}</h2>
+                    {text ? <p dir="auto">{text}</p> : null}
+                    {post.createdAt ? (
+                      <span className={styles.meta}>
+                        {formatDate(post.createdAt)}
+                      </span>
+                    ) : null}
+                  </div>
+                  <div className={styles.controls}>
+                    <button
+                      type="button"
+                      className={styles.remove}
+                      onClick={() => setRemoving(post)}
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        danger
+        busy={removeBusy}
+        kicker="Blog"
+        title="Remove post"
+        message="This deletes the blog post. This cannot be undone."
+        confirmLabel="Remove"
+        onConfirm={() => void confirmRemove()}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+      />
+    </div>
+  );
+}