reui-blocks/blocks/companies-detail2.tsx

"use client";

import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface Company {
  id: number;
  name: string;
  logo: string;
  description: string;
  headquarters: string;
  website: string;
  employees: number;
  industry: string;
  founded: number;
  funding: string;
  status: string;
  mission: string;
  techStack: string[];
}

interface CompanyInfo {
  label: string;
  value?: string | string[] | number;
  cell?: React.ReactNode;
}

const CompanyDetailValueCard = ({ label, value, cell }: CompanyInfo) => {
  return (
    <div className="hide-scrollbar flex flex-wrap items-center gap-2">
      {cell ? (
        cell
      ) : Array.isArray(value) ? (
        value.map((it: string, i: number) => {
          return <Badge key={`badge-${label}-${i}`}>{it}</Badge>;
        })
      ) : (
        <p className="font-medium">{value}</p>
      )}
    </div>
  );
};

interface CompanyDetailsCardProps {
  company: Company;
}

const CompanyDetailsCard = ({ company }: CompanyDetailsCardProps) => {
  const info: CompanyInfo[] = [
    {
      label: "مأموریت",
      value: company.mission,
    },
    {
      label: "صنعت",
      value: company.industry,
    },
    {
      label: "وضعیت",
      cell: (
        <Badge
          variant={
            company.status === "فعال"
              ? "default"
              : company.status === "عرضه عمومی"
                ? "secondary"
                : "outline"
          }
        >
          {company.status}
        </Badge>
      ),
    },
    {
      label: "سال تأسیس",
      value: company.founded.toLocaleString("fa-IR"),
    },
    {
      label: "دفتر مرکزی",
      value: company.headquarters,
    },
    {
      label: "وب‌سایت",
      value: company.website,
    },
    {
      label: "کارکنان",
      value: `${company.employees.toLocaleString("fa-IR")} نفر`,
    },
    {
      label: "میزان سرمایه‌گذاری",
      value: company.funding,
    },
    {
      label: "فناوری‌های مورد استفاده",
      value: company.techStack,
    },
  ];

  return (
    <div className="flex flex-col gap-8 overflow-y-auto px-4 py-4 md:px-6">
      <div className="flex gap-4">
        <img src={company.logo} alt={company.name} className="size-12" />
        <div>
          <p className="text-xl font-semibold">{company.name}</p>
          <p className="text-sm">{company.description}</p>
        </div>
      </div>

      <ul className="space-y-8">
        {info.map((item, i) => {
          return (
            <li
              className="flex flex-col gap-2 text-sm"
              key={`company-detail-card-info-${i}`}
            >
              <p className="text-muted-foreground">{item.label}</p>

              <CompanyDetailValueCard {...item} />
            </li>
          );
        })}
      </ul>
    </div>
  );
};

interface CompaniesDetail2Props {
  className?: string;
  companies: Company[];
}

const CompaniesDetail2 = ({
  companies = [
    {
      id: 1,
      name: "Vercel",
      logo: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
      description: "پلتفرم ابری برای توسعه، استقرار و میزبانی سریع برنامه‌های وب",
      headquarters: "🇺🇸 سانفرانسیسکو، آمریکا",
      website: "vercel.com",
      employees: 450,
      industry: "ابزار توسعه",
      founded: 2015,
      funding: "۳۱۳ میلیون دلار",
      status: "فعال",
      mission:
        "ارائه بهترین تجربه توسعه برای ساخت و استقرار وب‌اپلیکیشن‌ها در لبه شبکه.",
      techStack: ["Next.js", "React", "TypeScript", "Go", "Rust"],
    },
    {
      id: 2,
      name: "Supabase",
      logo: "/block-media/shadcnblocks/block/logos/supabase.svg",
      description: "پلتفرم متن‌باز Backend-as-a-Service برای توسعه سریع‌تر نرم‌افزار",
      headquarters: "🇸🇬 سنگاپور",
      website: "supabase.com",
      employees: 120,
      industry: "پایگاه داده",
      founded: 2020,
      funding: "۱۱۶ میلیون دلار",
      status: "فعال",
      mission:
        "آسان‌سازی ساخت و مقیاس‌پذیری اپلیکیشن‌ها با پلتفرم backend متن‌باز.",
      techStack: ["PostgreSQL", "Elixir", "TypeScript", "Deno", "Swift"],
    },
    {
      id: 3,
      name: "Spotify",
      logo: "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
      description: "سرویس پخش موسیقی و پادکست با میلیون‌ها کاربر فعال",
      headquarters: "🇸🇪 استکهلم، سوئد",
      website: "spotify.com",
      employees: 9800,
      industry: "سرگرمی",
      founded: 2006,
      funding: "۲٫۷ میلیارد دلار",
      status: "عرضه عمومی",
      mission:
        "آزاد کردن پتانسیل خلاقیت انسان با فرصت زندگی از هنر برای یک میلیون هنرمند.",
      techStack: ["Java", "Python", "React", "Kafka", "GCP"],
    },
    {
      id: 4,
      name: "Slack",
      logo: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
      description: "پلتفرم ارتباط و همکاری تیمی برای سازمان‌ها",
      headquarters: "🇺🇸 سانفرانسیسکو، آمریکا",
      website: "slack.com",
      employees: 2500,
      industry: "ارتباطات",
      founded: 2013,
      funding: "۱٫۴ میلیارد دلار",
      status: "خریداری‌شده",
      mission:
        "ساده‌تر، دلپذیرتر و پربارتر کردن کار با تحول در ارتباطات تیمی.",
      techStack: ["PHP", "Java", "React", "MySQL", "AWS"],
    },
    {
      id: 5,
      name: "Notion",
      logo: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
      description: "فضای کاری یکپارچه برای مدیریت دانش، مستندسازی و همکاری تیمی",
      headquarters: "🇺🇸 سانفرانسیسکو، آمریکا",
      website: "notion.so",
      employees: 800,
      industry: "بهره‌وری",
      founded: 2016,
      funding: "۳۴۳ میلیون دلار",
      status: "فعال",
      mission:
        "همه‌گیر کردن ابزارسازی با توانمندسازی همه برای ساخت نرم‌افزار متناسب با نیازشان.",
      techStack: ["React", "TypeScript", "Kotlin", "PostgreSQL", "Redis"],
    },
  ],
  className,
}: CompaniesDetail2Props) => {
  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);

  return (
    <section>
      <div className="container py-32">
        <div className="mb-8">
          <h2 className="text-xl font-semibold tracking-tight">شرکت‌ها</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            اطلاعات شرکت‌ها را ثبت، جستجو و مدیریت کنید.
                                </p>
        </div>
        <div className="mb-6 overflow-hidden rounded-lg border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>نام شرکت</TableHead>
                <TableHead>صنعت</TableHead>
                <TableHead>دفتر مرکزی</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {companies.map((company) => (
                <TableRow
                  key={company.id}
                  className="cursor-pointer"
                  onClick={() => setSelectedCompany(company)}
                >
                  <TableCell className="font-medium">{company.name}</TableCell>
                  <TableCell>{company.industry}</TableCell>
                  <TableCell>{company.headquarters}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>

        <Sheet
          open={!!selectedCompany}
          onOpenChange={(open) => !open && setSelectedCompany(null)}
        >
          <SheetContent
            side="right"
            className={cn("bg-background sm:max-w-lg", className)}
          >
            {selectedCompany && (
              <>
                <SheetHeader className="sr-only">
                  <SheetTitle>{selectedCompany.name}</SheetTitle>
                  <SheetDescription>
                    مشاهده اطلاعات {selectedCompany.name}
                  </SheetDescription>
                </SheetHeader>
                <CompanyDetailsCard company={selectedCompany} />
              </>
            )}
          </SheetContent>
        </Sheet>
      </div>
    </section>
  );
};

export { CompaniesDetail2 };