87 lines
5.4 KiB
Vue
87 lines
5.4 KiB
Vue
<script setup>
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
|
|
defineProps({
|
|
jobs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Offres d'emploi" />
|
|
|
|
<div class="min-h-screen bg-neutral text-anthracite font-sans">
|
|
<!-- Navigation Bar -->
|
|
<nav class="bg-white border-b border-anthracite/10 p-6">
|
|
<div class="max-w-4xl mx-auto flex items-center justify-between">
|
|
<Link href="/" class="flex items-center gap-3">
|
|
<img src="/images/logo.png" alt="Logo CABM" class="h-12 object-contain" />
|
|
</Link>
|
|
<div>
|
|
<Link :href="route('login')" class="text-sm font-bold text-primary hover:text-highlight transition-colors">
|
|
Espace Recruteur
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-4xl mx-auto py-12 px-6">
|
|
<div class="mb-10">
|
|
<h1 class="text-4xl font-serif font-bold text-primary mb-4">Offres d'emploi disponibles</h1>
|
|
<p class="text-lg text-anthracite/70">Découvrez nos opportunités et rejoignez-nous.</p>
|
|
</div>
|
|
|
|
<div v-if="jobs.length === 0" class="bg-white rounded-2xl shadow-sm p-12 text-center border border-anthracite/10">
|
|
<div class="w-16 h-16 bg-neutral rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-anthracite/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-anthracite mb-2">Aucune offre pour le moment</h3>
|
|
<p class="text-anthracite/60">Revenez plus tard pour découvrir nos futures opportunités.</p>
|
|
</div>
|
|
|
|
<div v-else class="grid grid-cols-1 gap-6">
|
|
<div v-for="job in jobs" :key="job.id" class="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-anthracite/10 group flex flex-col sm:flex-row">
|
|
<div class="p-8 flex-1">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span v-if="job.tenant" class="px-3 py-1 bg-highlight/20 text-[#3a2800] rounded-full text-xs font-bold uppercase tracking-wider">
|
|
{{ job.tenant.name }}
|
|
</span>
|
|
<span v-if="job.fpt_metadata?.infos_poste?.categorie" class="text-xs font-bold text-anthracite/50 uppercase tracking-widest bg-neutral px-2 py-1 rounded">
|
|
Catégorie {{ job.fpt_metadata.infos_poste.categorie }}
|
|
</span>
|
|
<span v-if="job.expires_at" class="text-[10px] font-black text-accent uppercase tracking-widest bg-accent/10 px-2 py-1 rounded flex items-center gap-1.5 border border-accent/20">
|
|
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
Expire le {{ new Date(job.expires_at).toLocaleDateString('fr-FR') }}
|
|
</span>
|
|
<span class="text-xs font-bold text-anthracite/50 uppercase tracking-widest">Temps plein</span>
|
|
</div>
|
|
<h2 class="text-2xl font-bold font-serif text-primary group-hover:text-highlight transition-colors mb-4">
|
|
{{ job.title }}
|
|
</h2>
|
|
<p class="text-anthracite/70 text-sm line-clamp-2 mb-6 leading-relaxed">
|
|
{{ job.description }}
|
|
</p>
|
|
|
|
<div v-if="job.requirements && job.requirements.length > 0" class="flex flex-wrap gap-2 mb-6">
|
|
<span v-for="(req, i) in job.requirements.slice(0, 3)" :key="i" class="px-2 py-1 bg-neutral rounded-md text-xs text-anthracite/60 font-medium">
|
|
{{ req }}
|
|
</span>
|
|
<span v-if="job.requirements.length > 3" class="px-2 py-1 bg-neutral rounded-md text-xs text-anthracite/60 font-medium">
|
|
+{{ job.requirements.length - 3 }} autres
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-neutral/50 p-6 sm:w-48 flex items-center justify-center border-t sm:border-t-0 sm:border-l border-anthracite/10">
|
|
<Link :href="route('jobs.show', job.id)" class="w-full text-center py-3 px-4 bg-primary text-white rounded-xl font-bold font-subtitle uppercase tracking-wider text-xs hover:bg-primary/90 hover:shadow-lg transition-all">
|
|
Voir l'offre
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|