reui-blocks/blocks/BlogBlocksPage.tsx

import { BlogBlocksCard } from "./test/BlogBlocksCard";
import { BlogBlocksCategoryTabs } from "./test/BlogBlocksCategoryTabs";

const categories = [
  "همه",
  "شرکت",
  "بازاریابی",
  "اتاق خبر",
  "شرکا",
  "مهندسی",
  "مطبوعات",
];
const cards = [
  {
    category: "شرکت",
    title: "پذیرش فرهنگ کار از راه دور",
    description:
      "مزایا و چالش‌های پذیرش فرهنگ دورکاری در کسب‌وکارهای امروزی را بررسی کنید.",
    date: "۱۸ آگوست ۲۲۵",
    authors: ["Meschac Irung"],
  },
  {
    category: "بازاریابی",
    title: "آینده تحول‌آفرین هوش مصنوعی در بازاریابی دیجیتال",
    description:
      "بررسی کنید هوش مصنوعی چگونه استراتژی‌های بازاریابی و تعامل با مشتری را متحول می‌کند.",
    date: "۱۰ سپتامبر ۲۲۵",
    authors: ["Theo Balick", "Meschac Irung"],
  },
  {
    category: "اتاق خبر",
    title: "نوآوری‌های پیشرفته در تحلیل داده",
    description:
      "با جدیدترین روندهای تحلیل داده آشنا شوید و ببینید چگونه رشد کسب‌وکار را هدایت می‌کنند.",
    date: "۵ اکتبر ۲۲۵",
    authors: ["Shadcn", "Meschac Irung"],
  },
  {
    category: "مهندسی",
    title: "پیشرفت‌ها در امنیت سایبری",
    description:
      "فناوری‌های تازه‌ای را بشناسید که کسب‌وکارها را در برابر تهدیدهای دیجیتال محافظت می‌کنند.",
    date: "۱۵ اکتبر ۲۲۵",
    authors: ["Meschac Irung"],
  },
  {
    category: "مطبوعات",
    title: "نقش بلاک‌چین در مالی مدرن",
    description: "بررسی کنید بلاک‌چین چگونه آینده خدمات مالی را متحول می‌کند.",
    date: "۱ نوامبر ۲۲۵",
    authors: ["Theo Balick"],
  },
  {
    category: "شرکت",
    title: "پایداری در فناوری: تمرکز رو به رشد",
    description: "با رویکردها و راهکارهای توسعه پایدار در صنعت فناوری آشنا شوید.",
    date: "۱۰ نوامبر ۲۲۵",
    authors: ["Shadcn"],
  },
  {
    category: "بازاریابی",
    title: "بهره‌گیری از کلان‌داده برای موفقیت کسب‌وکار",
    description:
      "بررسی کنید تحلیل کلان‌داده چگونه فرصت‌های جدیدی برای رشد کسب‌وکار ایجاد می‌کند.",
    date: "۵ دسامبر ۲۲۵",
    authors: ["Bernard Ngandu", "Glodie Lukose"],
  },
];

export function BlogBlocksPage() {
  return (
    <main role="main">
      <div className="bg-background scheme-light selection:bg-foreground/10 selection:text-foreground dark:scheme-dark">
        <section className="@container bg-background py-16 md:py-24">
          <div className="mx-auto max-w-5xl px-6">
            <div className="max-w-md">
              <span className="text-muted-foreground">وبلاگ</span>
              <h1 className="mt-4 text-xl font-semibold text-balance text-muted-foreground">
                اخبار، تحلیل‌ها و مطالب بیشتر از{" "}
                <strong className="font-semibold text-foreground">تیلارک کوارتز</strong>
              </h1>
            </div>
          </div>
          <div className="sticky top-0 z-10 my-12 bg-background">
            <div className="mx-auto max-w-5xl px-6">
              <div className="flex justify-between gap-4 border-b max-md:-mx-6">
                <BlogBlocksCategoryTabs labels={categories} />
              </div>
            </div>
          </div>
          <div className="mx-auto max-w-5xl px-6">
            <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
              {cards.map((card) => (
                <BlogBlocksCard
                  key={`${card.title}-${card.date}`}
                  category={card.category}
                  title={card.title}
                  description={card.description}
                  date={card.date}
                  authors={card.authors}
                />
              ))}
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}