reui-blocks/blocks/list1.tsx

import { BarChart3, Briefcase, Cloud, Shield } from "lucide-react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

type OfferType = "free" | "professional" | "enterprise";

const offerStyles: Record<OfferType, string> = {
  free: "bg-yellow-400",
  professional: "bg-green-400",
  enterprise: "bg-blue-400",
};

const data = [
  {
    id: "security-1",
    icon: <Shield strokeWidth={2} />,
    category: "امنیت",
    description:
      "راهکار امنیتی سازمانی با حفاظت پیشرفته در برابر تهدید و پایش مستمر",
    year: 2024,
    offer: "رایگان",
    offerType: "free" as OfferType,
    segment: "کسب‌وکار",
  },
  {
    id: "technology-1",
    icon: <Cloud strokeWidth={2} />,
    category: "فناوری",
    description:
      "پلتفرم ابری با راهکارهای مقیاس‌پذیر برای کسب‌وکارهای امروزی",
    year: 2023,
    offer: "حرفه‌ای",
    offerType: "professional" as OfferType,
    segment: "کسب‌وکار",
  },
  {
    id: "services-1",
    icon: <Briefcase strokeWidth={2} />,
    category: "خدمات",
    description:
      "مجموعه جامع مدیریت کسب‌وکار برای سازمان‌های در حال رشد",
    year: 2022,
    offer: "سازمانی",
    offerType: "enterprise" as OfferType,
    segment: "سازمانی",
  },
  {
    id: "analytics-1",
    icon: <BarChart3 strokeWidth={2} />,
    category: "تحلیل‌داده",
    description:
      "پلتفرم تحلیل داده بلادرنگ با داشبورد و گزارش‌گیری قابل سفارشی‌سازی",
    year: 2024,
    offer: "حرفه‌ای",
    offerType: "professional" as OfferType,
    segment: "کسب‌وکار",
  },
  {
    id: "security-2",
    icon: <Shield strokeWidth={2} />,
    category: "امنیت",
    description:
      "سیستم پیشرفته حفاظت از نقاط پایانی با تشخیص تهدید مبتنی بر هوش مصنوعی",
    year: 2023,
    offer: "حرفه‌ای",
    offerType: "professional" as OfferType,
    segment: "سازمانی",
  },
  {
    id: "technology-2",
    icon: <Cloud strokeWidth={2} />,
    category: "فناوری",
    description:
      "پلتفرم محاسبات بدون سرور با قابلیت مقیاس‌دهی خودکار",
    year: 2024,
    offer: "سازمانی",
    offerType: "enterprise" as OfferType,
    segment: "کسب‌وکار",
  },
  {
    id: "services-2",
    icon: <Briefcase strokeWidth={2} />,
    category: "خدمات",
    description:
      "خدمات مشاوره حرفه‌ای برای پروژه‌های تحول دیجیتال",
    year: 2023,
    offer: "رایگان",
    offerType: "free" as OfferType,
    segment: "کسب‌وکار",
  },
];

const formatYear = (year: number) => year.toLocaleString("fa-IR");

interface List1Props {
  className?: string;
}

const List1 = ({ className }: List1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container px-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead></TableHead>
              <TableHead className="hidden font-bold text-primary md:table-cell">
                دسته‌بندی
              </TableHead>
              <TableHead>
                <span className="hidden font-bold text-primary md:block">
                  توضیحات
                </span>
                <span className="block font-bold text-primary md:hidden">
                  پروژه
                </span>
              </TableHead>
              <TableHead className="hidden text-end font-bold text-primary md:table-cell">
                سال
              </TableHead>
              <TableHead className="hidden font-bold text-primary md:table-cell">
                طرح
              </TableHead>
              <TableHead className="hidden font-bold text-primary md:table-cell">
                بخش
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((item) => (
              <TableRow key={item.id}>
                <TableCell className="">
                  <div className="flex items-center gap-2 align-top">
                    {item.icon}
                  </div>
                </TableCell>
                <TableCell className="hidden md:table-cell">
                  {item.category}
                </TableCell>
                <TableCell className="ps-0 align-top md:ps-4">
                  <div className="flex flex-col gap-2">
                    <div className="flex items-baseline justify-between gap-1 md:hidden">
                      <div className="flex items-center gap-1">
                        <span className="text-sm font-medium">
                          {item.category}
                        </span>
                        <span className="text-sm text-muted-foreground">
                           {item.segment}
                        </span>
                        <span
                          className={cn(
                            "ms-1 block h-1.5 w-4 rounded-full md:hidden",
                            offerStyles[item.offerType],
                          )}
                        ></span>
                      </div>
                      <span className="text-xs text-muted-foreground">
                        {formatYear(item.year)}
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground md:text-primary">
                      {item.description}
                    </p>
                  </div>
                </TableCell>
                <TableCell className="hidden text-end md:table-cell">
                  {formatYear(item.year)}
                </TableCell>
                <TableCell className="hidden md:table-cell">
                  <div className="flex items-center gap-2">
                    <span
                      className={cn(
                        "block h-6 w-1.5 rounded-full",
                        offerStyles[item.offerType],
                      )}
                    ></span>
                    {item.offer}
                  </div>
                </TableCell>
                <TableCell className="hidden md:table-cell">
                  {item.segment}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </section>
  );
};

export { List1 };