104 lines
4.8 KiB
TypeScript
104 lines
4.8 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Button } from '@/components/ui/Button';
|
|
|
|
export interface JobListingBlockProps {
|
|
title?: string;
|
|
showJobs?: boolean;
|
|
showFairs?: boolean;
|
|
fairsTitle?: string;
|
|
fairs?: Array<{ name: string; date: string; type: string }>;
|
|
emptyStateMessage?: string;
|
|
emptyStateLinkText?: string;
|
|
emptyStateLinkHref?: string;
|
|
}
|
|
|
|
export const JobListingBlock = async (props: JobListingBlockProps) => {
|
|
const {
|
|
title,
|
|
showJobs = true,
|
|
showFairs,
|
|
fairsTitle = 'Nächste Messetermine 2026',
|
|
fairs = [
|
|
{ name: 'Intersolar München', date: '19. - 21. Juni 2026', type: 'Energie-Messe' },
|
|
{ name: 'Windenergietage Linstow', date: '04. - 06. November 2026', type: 'Fachkongress' },
|
|
{ name: 'Kabelwerkstatt Wiesbaden', date: '02. - 03. Dezember 2026', type: 'Fachmesse' }
|
|
],
|
|
emptyStateMessage = 'Aktuell sind alle Positionen besetzt. Senden Sie uns gerne eine Initiativbewerbung!',
|
|
emptyStateLinkText = 'Jetzt Kontakt aufnehmen',
|
|
emptyStateLinkHref = '/kontakt'
|
|
} = props;
|
|
|
|
// Since Payload is removed, we use an empty array or static data
|
|
const jobs: any[] = [];
|
|
|
|
return (
|
|
<div className="py-12 md:py-24">
|
|
<div className="container max-w-4xl mx-auto">
|
|
{showFairs && (
|
|
<div className="bg-neutral-dark rounded-2xl p-8 md:p-12 mb-16 text-white overflow-hidden relative group">
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 blur-3xl -translate-y-1/2 translate-x-1/2" />
|
|
<h3 className="font-heading font-bold text-3xl mb-8 relative z-10 flex items-center gap-3">
|
|
<span className="w-8 h-1 bg-primary" />
|
|
{fairsTitle}
|
|
</h3>
|
|
<ul className="space-y-6 relative z-10">
|
|
{fairs.map((messe) => (
|
|
<li key={messe.name} className="flex flex-col md:flex-row md:items-center justify-between border-b border-white/10 pb-6 group/item hover:bg-white/5 transition-colors p-4 -m-4 rounded-2xl">
|
|
<div>
|
|
<span className="text-primary-light font-bold text-sm uppercase tracking-widest block mb-1">{messe.type}</span>
|
|
<span className="font-heading font-bold text-2xl">{messe.name}</span>
|
|
</div>
|
|
<div className="mt-2 md:mt-0 text-right">
|
|
<span className="text-white/60 font-medium block">{messe.date}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{showJobs && (
|
|
<div className="mb-12">
|
|
<h2 className="font-heading font-extrabold text-4xl text-neutral-dark mb-8">
|
|
{title || 'Aktuelle Stellenangebote'}
|
|
</h2>
|
|
|
|
{jobs.length > 0 ? (
|
|
<div className="grid gap-6">
|
|
{jobs.map((job: any) => (
|
|
<Link
|
|
key={job.id}
|
|
href={`/karriere/${job.slug}`}
|
|
className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6"
|
|
>
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full uppercase">{job.type}</span>
|
|
<span className="text-text-secondary text-sm font-medium">{job.department}</span>
|
|
</div>
|
|
<h4 className="font-heading font-bold text-2xl text-neutral-dark group-hover:text-primary transition-colors">{job.title}</h4>
|
|
<p className="text-text-secondary mt-1">{job.location}</p>
|
|
</div>
|
|
<div className="flex items-center text-primary font-bold group-hover:translate-x-2 transition-transform">
|
|
Details ansehen
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center">
|
|
<p className="text-text-secondary text-lg">{emptyStateMessage}</p>
|
|
<Button href={emptyStateLinkHref} variant="primary" className="mt-6">
|
|
{emptyStateLinkText}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|