107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface JobOpening {
|
|
title: string;
|
|
location: string;
|
|
url: string;
|
|
}
|
|
|
|
interface JobCategory {
|
|
category: string;
|
|
openings: JobOpening[];
|
|
}
|
|
|
|
interface Careers4Props {
|
|
heading?: string;
|
|
jobs?: JobCategory[];
|
|
className?: string;
|
|
}
|
|
|
|
const defaultJobs: JobCategory[] = [
|
|
{
|
|
category: "مهندسی",
|
|
openings: [
|
|
{
|
|
title: "توسعهدهنده ارشد فرانتاند",
|
|
location: "دورکاری",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "طراح رابط و تجربه کاربری",
|
|
location: "تهران",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "توسعهدهنده ارشد بکاند",
|
|
location: "دورکاری",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "سرپرست فنی",
|
|
location: "اصفهان",
|
|
url: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
category: "طراحی",
|
|
openings: [
|
|
{
|
|
title: "طراح محصول",
|
|
location: "دورکاری",
|
|
url: "#",
|
|
},
|
|
{
|
|
title: "طراح بصری",
|
|
location: "شیراز",
|
|
url: "#",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const Careers4 = ({
|
|
heading = "فرصتهای شغلی",
|
|
jobs = defaultJobs,
|
|
className,
|
|
}: Careers4Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container mx-auto">
|
|
<h2 className="text-3xl font-medium md:text-xl">{heading}</h2>
|
|
<div className="mt-6 flex flex-col gap-16 md:mt-14">
|
|
{jobs.map((jobCategory) => (
|
|
<div key={jobCategory.category} className="grid">
|
|
<h2 className="border-b pb-4 text-xl font-bold">
|
|
{jobCategory.category}
|
|
</h2>
|
|
{jobCategory.openings.map((job) => (
|
|
<div
|
|
key={job.title}
|
|
className="flex items-center justify-between border-b py-4"
|
|
>
|
|
<div>
|
|
<a href={job.url} className="font-semibold hover:underline">
|
|
{job.title}
|
|
</a>
|
|
<p className="text-sm text-muted-foreground">
|
|
{job.location}
|
|
</p>
|
|
</div>
|
|
<a href={job.url} className="hover:text-muted-foreground">
|
|
<ArrowRight className="size-4 rtl:rotate-180" />
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Careers4 };
|