92 lines
4.1 KiB
TypeScript
92 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import CategorieBHorsData from './categorie-b-hors-data';
|
|
import CategorieBHorsDataPart2 from './categorie-b-hors-data-part2';
|
|
import CategorieBHorsDataPart3 from './categorie-b-hors-data-part3';
|
|
|
|
type Filiere = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
|
|
|
|
const filieres: { code: Filiere; nom: string; part: 1 | 2 | 3 }[] = [
|
|
{ code: 'A', nom: 'Contenu du programme et collaboration artistique', part: 1 },
|
|
{ code: 'B', nom: 'Costumes, décor', part: 1 },
|
|
{ code: 'C', nom: 'Image', part: 1 },
|
|
{ code: 'D', nom: 'Plateaux et tournage', part: 2 },
|
|
{ code: 'E', nom: 'Postproduction', part: 2 },
|
|
{ code: 'F', nom: 'Production', part: 2 },
|
|
{ code: 'G', nom: 'Réalisation', part: 3 },
|
|
{ code: 'H', nom: 'Son', part: 3 },
|
|
{ code: 'I', nom: 'Web', part: 3 },
|
|
];
|
|
|
|
export default function CategorieBHors() {
|
|
const [activeFiliere, setActiveFiliere] = useState<Filiere>('A');
|
|
const [hoveredFiliere, setHoveredFiliere] = useState<Filiere | null>(null);
|
|
|
|
const activePart = filieres.find(f => f.code === activeFiliere)?.part || 1;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* En-tête de la catégorie */}
|
|
<div className="rounded-xl border bg-gradient-to-br from-emerald-50 to-teal-50 p-4">
|
|
<h2 className="text-lg font-semibold text-emerald-900 mb-1">
|
|
Catégorie B - Hors fiction & flux
|
|
</h2>
|
|
<p className="text-sm text-emerald-700">
|
|
Grille des salaires par filière - Programmes ni fiction, ni flux
|
|
</p>
|
|
{/* Ligne d'information globale supprimée pour alléger l'en-tête */}
|
|
</div>
|
|
|
|
{/* Sélection des filières */}
|
|
<div className="space-y-3">
|
|
<p className="text-xs text-slate-600">
|
|
Sélectionnez une filière pour explorer les emplois :
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{filieres.map((filiere) => (
|
|
<div key={filiere.code} className="relative">
|
|
<button
|
|
onClick={() => setActiveFiliere(filiere.code)}
|
|
onMouseEnter={() => setHoveredFiliere(filiere.code)}
|
|
onMouseLeave={() => setHoveredFiliere(null)}
|
|
className={`relative px-4 py-2 rounded-full text-sm font-semibold transition-all ${
|
|
activeFiliere === filiere.code
|
|
? 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md'
|
|
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
|
}`}
|
|
>
|
|
Filière {filiere.code}
|
|
{activeFiliere === filiere.code && (
|
|
<span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-white flex items-center justify-center">
|
|
<svg className="w-3 h-3 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{/* Tooltip */}
|
|
{hoveredFiliere === filiere.code && (
|
|
<div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-slate-900 text-white text-xs font-medium rounded-lg shadow-lg whitespace-nowrap animate-in fade-in slide-in-from-bottom-1 duration-200">
|
|
{filiere.nom}
|
|
<div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px">
|
|
<div className="border-4 border-transparent border-t-slate-900" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Contenu */}
|
|
<div className="mt-4">
|
|
{activePart === 1 && <CategorieBHorsData key={activeFiliere} activeFiliere={activeFiliere} />}
|
|
{activePart === 2 && <CategorieBHorsDataPart2 key={activeFiliere} activeFiliere={activeFiliere} />}
|
|
{activePart === 3 && <CategorieBHorsDataPart3 key={activeFiliere} activeFiliere={activeFiliere} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|