98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Role {
|
|
title: string;
|
|
location: string;
|
|
href: string;
|
|
}
|
|
|
|
interface Department {
|
|
title: string;
|
|
roles: Role[];
|
|
className?: string;
|
|
}
|
|
|
|
interface Careers1Props {
|
|
title?: string;
|
|
description?: string;
|
|
departments?: Department[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultDepartments: Department[] = [
|
|
{
|
|
title: "فروش",
|
|
roles: [
|
|
{
|
|
title: "مدیر فروش",
|
|
location: "تهران",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "کارشناس توسعه بازار",
|
|
location: "تهران",
|
|
href: "#",
|
|
},
|
|
{
|
|
title: "مدیر فروش",
|
|
location: "تهران",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "موفقیت مشتری",
|
|
roles: [
|
|
{
|
|
title: "کارشناس موفقیت مشتری",
|
|
location: "تهران",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const Careers1 = ({
|
|
title = "فرصتهای شغلی",
|
|
description = "موقعیتهای شغلی باز ما را مشاهده کنید.",
|
|
departments = defaultDepartments,
|
|
className,
|
|
}: Careers1Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
|
|
<div className="container">
|
|
<h2 className="text-xl font-medium md:text-2xll">{title}</h2>
|
|
<p className="mt-6 whitespace-pre-wrap text-muted-foreground md:mb-20 md:text-lg">
|
|
{description}
|
|
</p>
|
|
{departments.map((department) => (
|
|
<div key={department.title} className="mt-12 md:mt-20">
|
|
<h3 className="mb-8 text-3xl font-medium md:text-xl">
|
|
{department.title}
|
|
</h3>
|
|
<ul className="divide-y divide-border border-y border-border">
|
|
{department.roles.map((role, index) => (
|
|
<li key={index} className="group">
|
|
<a href={role.href} className="flex items-center py-6">
|
|
<div>
|
|
<div className="font-medium md:text-lg">{role.title}</div>
|
|
<div className="text-xs text-muted-foreground md:mt-2 md:text-sm">
|
|
{role.location}
|
|
</div>
|
|
</div>
|
|
<ArrowRight className="ms-auto size-6 translate-x-6 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100 rtl:-translate-x-6 rtl:rotate-180 rtl:group-hover:translate-x-0" />
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Careers1 };
|