reui-blocks/blocks/team9.tsx

"use client";

import { SearchIcon } from "lucide-react";
import { useState } from "react";

import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const categories = [
  "مهندسی",
  "طراحی",
  "بازاریابی",
  "فروش",
  "پشتیبانی",
  "رهبری",
] as const;

const formatYears = (years: number) =>
  `${years.toLocaleString("fa-IR")} سال تجربه`;

interface Member {
  name: string;
  image: string;
  role: string;
  yearsOfExperience: number;
  categories: (typeof categories)[number];
}

const members: Member[] = [
  {
    name: "علی رضوی",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    role: "مدیرعامل",
    yearsOfExperience: 15,
    categories: "رهبری",
  },
  {
    name: "سارا احمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "طراح ارشد",
    yearsOfExperience: 8,
    categories: "طراحی",
  },
  {
    name: "امیر محمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مهندس ارشد محصول",
    yearsOfExperience: 10,
    categories: "مهندسی",
  },
  {
    name: "مریم حسینی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مدیر بازاریابی",
    yearsOfExperience: 12,
    categories: "بازاریابی",
  },
  {
    name: "پویا جعفری",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مدیر فروش",
    yearsOfExperience: 7,
    categories: "فروش",
  },
  {
    name: "سمیه رحیمی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "مدیر موفقیت مشتری",
    yearsOfExperience: 5,
    categories: "پشتیبانی",
  },
  {
    name: "حسین کاظمی",
    image:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    role: "مدیر فناوری",
    yearsOfExperience: 20,
    categories: "رهبری",
  },
  {
    name: "نرگس مرادی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "طراح محصول",
    yearsOfExperience: 6,
    categories: "طراحی",
  },
  {
    name: "آرمان نوری",
    image:
      "/block-media/shadcnblocks/block/avatar-8.webp",
    role: "مهندس فرانت‌اند",
    yearsOfExperience: 4,
    categories: "مهندسی",
  },
  {
    name: "لیلا کریمی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "متخصص بازاریابی",
    yearsOfExperience: 3,
    categories: "بازاریابی",
  },
  {
    name: "کامران پارخی",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    role: "نماینده فروش",
    yearsOfExperience: 5,
    categories: "فروش",
  },
  {
    name: "مهسا امینی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "متخصص پشتیبانی",
    yearsOfExperience: 2,
    categories: "پشتیبانی",
  },
  {
    name: "توماج راست",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مهندس بک‌اند",
    yearsOfExperience: 8,
    categories: "مهندسی",
  },
  {
    name: "مینا کیانی",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "طراح رابط کاربری",
    yearsOfExperience: 4,
    categories: "طراحی",
  },
  {
    name: "دانیال غفاری",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    role: "مدیر بازاریابی",
    yearsOfExperience: 9,
    categories: "بازاریابی",
  },
  {
    name: "ژیلا لطفی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مدیر فروش",
    yearsOfExperience: 11,
    categories: "فروش",
  },
  {
    name: "امیر حسینی",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مدیر پشتیبانی",
    yearsOfExperience: 6,
    categories: "پشتیبانی",
  },
  {
    name: "پریسا معمار",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "مدیر عملیات",
    yearsOfExperience: 18,
    categories: "رهبری",
  },
  {
    name: "رایان طهماسب",
    image:
      "/block-media/shadcnblocks/block/avatar-6.webp",
    role: "مهندس سیستم",
    yearsOfExperience: 7,
    categories: "مهندسی",
  },
  {
    name: "سحر تابنده",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "طراح محصول",
    yearsOfExperience: 5,
    categories: "طراحی",
  },
  {
    name: "کیوان احمدی",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "بازاریابی محتوا",
    yearsOfExperience: 4,
    categories: "بازاریابی",
  },
  {
    name: "مائده رضایی",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "سرپرست تیم فروش",
    yearsOfExperience: 8,
    categories: "فروش",
  },
  {
    name: "سروش اعلایی",
    image:
      "/block-media/shadcnblocks/block/avatar-8.webp",
    role: "پشتیبانی فنی",
    yearsOfExperience: 3,
    categories: "پشتیبانی",
  },
  {
    name: "نیایش چینی",
    image:
      "/block-media/shadcnblocks/block/avatar-7.webp",
    role: "مدیر مالی",
    yearsOfExperience: 16,
    categories: "رهبری",
  },
  {
    name: "آرش ترنر",
    image:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    role: "مهندس دواپس",
    yearsOfExperience: 6,
    categories: "مهندسی",
  },
  {
    name: "نینا پاتیل",
    image:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "طراح موشن",
    yearsOfExperience: 4,
    categories: "طراحی",
  },
  {
    name: "سامان رابرتس",
    image:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    role: "مهندس ابری",
    yearsOfExperience: 5,
    categories: "مهندسی",
  },
  {
    name: "ژیلا ژان",
    image:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    role: "مهندس امنیت",
    yearsOfExperience: 7,
    categories: "مهندسی",
  },
  {
    name: "مارکو جانسون",
    image:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    role: "مهندس موبایل",
    yearsOfExperience: 6,
    categories: "مهندسی",
  },
];

interface Team9Props {
  className?: string;
}

const Team9 = ({ className }: Team9Props) => {
  const [selectedCategory, setSelectedCategory] = useState<string>(
    categories[0],
  );
  const [searchQuery, setSearchQuery] = useState("");

  const filteredMembers = members.filter((member) => {
    const matchesCategory = selectedCategory === member.categories;
    const query = searchQuery.trim().toLowerCase();
    const matchesSearch =
      query === "" ||
      member.name.toLowerCase().includes(query) ||
      member.role.toLowerCase().includes(query);

    return matchesCategory && matchesSearch;
  });

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-8 text-start">
          <h2 className="text-xl md:text-2xll">با تیم محصول ما آشنا شوید</h2>
          <p className="max-w-2xl text-muted-foreground">
            گروه متنوع ما از متخصصان، تخصص‌های طراحی، مهندسی و فناوری را گرد
            هم آورده تا راه‌حل‌های نوآورانه‌ای بسازیم که ایده‌ها را به واقعیت
            تبدیل کند.
          </p>
        </div>
        <div className="mt-14">
          <div className="flex flex-col justify-between gap-4 md:flex-row">
            <Tabs
              value={selectedCategory}
              onValueChange={setSelectedCategory}
              className="-mx-8 overflow-x-auto px-8"
            >
              <ScrollableTabsList className="rounded-none">
                <TabsList className="flex h-auto justify-start gap-4 overflow-y-hidden bg-background md:flex-wrap">
                  {categories.map((category) => (
                    <TabsTrigger
                      key={category}
                      value={category}
                      className="relative flex flex-col items-center gap-2 overflow-visible whitespace-nowrap !shadow-none data-[state=active]:text-foreground"
                    >
                      {category}
                      <span
                        className={cn(
                          "absolute -bottom-1 h-0.5 w-full bg-primary opacity-0",
                          selectedCategory === category && "opacity-100",
                        )}
                      />
                    </TabsTrigger>
                  ))}
                </TabsList>
              </ScrollableTabsList>
            </Tabs>
            <div className="relative h-fit">
              <Input
                className="ps-9"
                placeholder="جستجوی اعضا"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-muted-foreground/80">
                <SearchIcon className="size-4" />
              </div>
            </div>
          </div>
          <div className="mt-9 grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {filteredMembers.map((member) => (
              <div
                key={member.name}
                className="rounded-2xl border border-border bg-background p-7 text-center"
              >
                <img
                  src={member.image}
                  alt={member.name}
                  className="mx-auto size-28 rounded-full border border-border"
                />
                <div className="mt-6 flex flex-col justify-center">
                  <p className="text-xl font-medium text-primary">
                    {member.name}
                  </p>
                  <p className="text-sm text-muted-foreground">{member.role}</p>
                </div>
                <Separator className="my-6 bg-linear-to-r from-background via-border to-background" />
                <p className="text-sm text-muted-foreground">
                  {formatYears(member.yearsOfExperience)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Team9 };