feat(ui): finalize E-TIB modernization with footer redesign, video optimization, and TS fixes
Former-commit-id: 67ac02c8404cc66893fdf97308574701cca6000c
This commit is contained in:
@@ -1,39 +1,49 @@
|
||||
import React from 'react';
|
||||
import { getPayload } from 'payload';
|
||||
import configPromise from '@payload-config';
|
||||
import Link from 'next/link';
|
||||
|
||||
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, showFairs } = props;
|
||||
const payload = await getPayload({ config: configPromise });
|
||||
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;
|
||||
|
||||
const { docs: jobs } = await payload.find({
|
||||
collection: 'jobs',
|
||||
limit: 100,
|
||||
});
|
||||
// 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-3xl p-8 md:p-12 mb-16 text-white overflow-hidden relative group">
|
||||
<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" />
|
||||
Nächste Messetermine 2026
|
||||
{fairsTitle}
|
||||
</h3>
|
||||
<ul className="space-y-6 relative z-10">
|
||||
{[
|
||||
{ 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' }
|
||||
].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-xl">
|
||||
{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>
|
||||
@@ -47,41 +57,43 @@ export const JobListingBlock = async (props: JobListingBlockProps) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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>
|
||||
{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>
|
||||
<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">Aktuell sind alle Positionen besetzt. Senden Sie uns gerne eine Initiativbewerbung!</p>
|
||||
<Link href="/kontakt" className="inline-block mt-6 text-primary font-bold hover:underline">Jetzt Kontakt aufnehmen</Link>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
<Link href={emptyStateLinkHref} className="inline-block mt-6 text-primary font-bold hover:underline">{emptyStateLinkText}</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user