reui-blocks/blocks/list3.tsx

import React from "react";

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Period {
  from: number;
  to: number | null;
}

interface Experience {
  id: string;
  period: Period;
  role: string;
  company: string;
}

interface Award {
  id: string;
  year: number;
  title: string;
  organization: string;
}

const formatPeriod = ({ from, to }: Period) => {
  const fromFa = from.toLocaleString("fa-IR");
  if (to === null) return `${fromFa}  اکنون`;
  return `${fromFa}  ${to.toLocaleString("fa-IR")}`;
};

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

const experiences: Experience[] = [
  {
    id: "exp-1",
    period: { from: 2019, to: null },
    role: "مهندس ارشد نرم‌افزار",
    company: "شرکت نوآوری‌های فناوری",
  },
  {
    id: "exp-2",
    period: { from: 2018, to: 2020 },
    role: "توسعه‌دهنده فول‌استک",
    company: "راهکارهای دیجیتال و همکاری با استارتاپ‌ها",
  },
  {
    id: "exp-3",
    period: { from: 2017, to: 2018 },
    role: "توسعه‌دهنده فرانت‌اند",
    company: "استودیو وب‌کرفت",
  },
  {
    id: "exp-4",
    period: { from: 2015, to: 2016 },
    role: "توسعه‌دهنده مبتدی",
    company: "آزمایشگاه کدفورج",
  },
  {
    id: "exp-5",
    period: { from: 2014, to: 2015 },
    role: "کارآموز توسعه",
    company: "نوآوری‌تک",
  },
];

const awards: Award[] = [
  {
    id: "award-1",
    year: 2015,
    title: "بهترین توسعه‌دهنده تازه‌وارد",
    organization: "جوایز تعالی فناوری",
  },
  {
    id: "award-2",
    year: 2015,
    title: "نوآوری در توسعه وب",
    organization: "خالقان دیجیتال بریتانیا",
  },
  {
    id: "award-3",
    year: 2016,
    title: "کیفیت برجسته کد",
    organization: "انجمن نرم‌افزار بریتانیا",
  },
  {
    id: "award-4",
    year: 2017,
    title: "ستاره درخشان فناوری",
    organization: "جوایز جهانی توسعه‌دهندگان",
  },
  {
    id: "award-5",
    year: 2018,
    title: "توسعه‌دهنده سال",
    organization: "جوایز تعالی کد",
  },
  {
    id: "award-6",
    year: 2019,
    title: "بهترین رهبر تیم فناوری",
    organization: "انجمن نرم‌افزار بریتانیا",
  },
  {
    id: "award-7",
    year: 2020,
    title: "نوآوری در معماری نرم‌افزار",
    organization: "جوایز نوآوری دیجیتال",
  },
  {
    id: "award-8",
    year: 2021,
    title: "رهبر نوظهور فناوری",
    organization: "شورای فناوری لندن",
  },
  {
    id: "award-9",
    year: 2022,
    title: "تعالی در توسعه فول‌استک",
    organization: "هفتگی توسعه‌دهندگان",
  },
  {
    id: "award-10",
    year: 2023,
    title: "بهترین مهندس نرم‌افزار",
    organization: "فناوری و رسانه اروپا",
  },
];

interface List3Props {
  className?: string;
}

const List3 = ({ className }: List3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-12">
          <div className="flex flex-col gap-5 text-start">
            <span className="text-sm text-muted-foreground">/ مسیر شغلی</span>
            <h1 className="text-xl md:text-2xll">
              راهکار می‌سازیم،
              <br /> آینده را شکل می‌دهیم
            </h1>
          </div>
          <div className="flex flex-col gap-7">
            <h2 className="text-start text-xl">/ سوابق کاری</h2>
            <div>
              {experiences.map((experience) => (
                <React.Fragment key={experience.id}>
                  <Separator />
                  <div className="my-2.5 grid gap-2.5 text-sm sm:grid-cols-3">
                    <p className="text-start text-muted-foreground">
                      {formatPeriod(experience.period)}
                    </p>
                    <p className="text-start">{experience.role}</p>
                    <p className="text-start text-muted-foreground">
                      {experience.company}
                    </p>
                  </div>
                </React.Fragment>
              ))}
            </div>
          </div>
          <div className="flex flex-col gap-7">
            <h2 className="text-start text-xl">/ افتخارات</h2>
            <div>
              {awards.map((award) => (
                <React.Fragment key={award.id}>
                  <Separator />
                  <div className="my-2.5 grid gap-2.5 text-sm sm:grid-cols-3">
                    <p className="text-start text-muted-foreground">
                      {formatYear(award.year)}
                    </p>
                    <p className="text-start">{award.title}</p>
                    <p className="text-start text-muted-foreground">
                      {award.organization}
                    </p>
                  </div>
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { List3 };