111 lines
6.7 KiB
TypeScript
111 lines
6.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { usePageTitle } from '@/hooks/usePageTitle';
|
|
import Link from 'next/link';
|
|
import { Scale, ExternalLink, Drama, Video } from 'lucide-react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
|
|
export default function MinimaCCNPage() {
|
|
usePageTitle("Minima CCN");
|
|
const searchParams = useSearchParams();
|
|
const isEmbed = searchParams.get('embed') === '1';
|
|
|
|
// Post height to parent for auto-resizing if embedded
|
|
useEffect(() => {
|
|
if (!isEmbed) return;
|
|
function postHeight() {
|
|
try {
|
|
const h = document.documentElement.scrollHeight;
|
|
window.parent?.postMessage({ type: 'minima-ccn:height', height: h }, '*');
|
|
} catch {}
|
|
}
|
|
postHeight();
|
|
const ro = new ResizeObserver(() => postHeight());
|
|
ro.observe(document.body);
|
|
window.addEventListener('load', postHeight);
|
|
window.addEventListener('resize', postHeight);
|
|
return () => {
|
|
ro.disconnect();
|
|
window.removeEventListener('load', postHeight);
|
|
window.removeEventListener('resize', postHeight);
|
|
};
|
|
}, [isEmbed]);
|
|
|
|
return (
|
|
<div className={isEmbed ? "space-y-3" : "space-y-6"}>
|
|
{!isEmbed ? (
|
|
<>
|
|
{/* En-tête */}
|
|
<section className="rounded-2xl border bg-white p-6">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
|
<Scale className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h1 className="text-2xl font-semibold text-slate-900">Minima des CCN du spectacle</h1>
|
|
<p className="text-sm text-slate-600 mt-2">Accédez aux minima actualisés par convention collective.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* Grille des cartes CCN (desktop) */}
|
|
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<Link href="/minima-ccn/ccneac" className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-indigo-300 hover:-translate-y-1">
|
|
<div className="absolute top-4 right-4">
|
|
<span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">À jour 2025</span>
|
|
</div>
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 border border-indigo-200 flex items-center justify-center mb-4">
|
|
<Drama className="w-7 h-7 text-indigo-600" strokeWidth={1.6} />
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-2">CCNEAC (IDCC 1285)</h2>
|
|
<p className="text-sm text-slate-600 mb-4">Convention Collective Nationale des Entreprises Artistiques et Culturelles</p>
|
|
<div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 group-hover:gap-3 transition-all">Voir les minima<ExternalLink className="w-4 h-4" /></div>
|
|
</Link>
|
|
<Link href="/minima-ccn/ccnsvp" className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-indigo-300 hover:-translate-y-1">
|
|
<div className="absolute top-4 right-4"><span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">À jour 2025</span></div>
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-100 to-cyan-100 border border-blue-200 flex items-center justify-center mb-4">
|
|
<Drama className="w-7 h-7 text-blue-600" strokeWidth={1.6} />
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-2">CCNSVP (IDCC 3090)</h2>
|
|
<p className="text-sm text-slate-600 mb-4">Convention Collective Nationale du Spectacle Vivant Privé</p>
|
|
<div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 group-hover:gap-3 transition-all">Voir les minima<ExternalLink className="w-4 h-4" /></div>
|
|
</Link>
|
|
<Link href="/minima-ccn/ccnpa" className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-cyan-300 hover:-translate-y-1">
|
|
<div className="absolute top-4 right-4"><span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">À jour 2025</span></div>
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-100 to-blue-100 border border-cyan-200 flex items-center justify-center mb-4">
|
|
<Video className="w-7 h-7 text-cyan-600" strokeWidth={1.6} />
|
|
</div>
|
|
<h2 className="text-xl font-semibold text-slate-900 mb-2">CCNPA (IDCC 2642)</h2>
|
|
<p className="text-sm text-slate-600 mb-4">Convention Collective Nationale de la Production Audiovisuelle</p>
|
|
<div className="inline-flex items-center gap-2 text-sm font-semibold text-cyan-600 group-hover:gap-3 transition-all">Voir les minima<ExternalLink className="w-4 h-4" /></div>
|
|
</Link>
|
|
</section>
|
|
</>
|
|
) : (
|
|
// UI ultra compacte pour embed: simple liste de liens
|
|
<section className="rounded-lg border bg-white p-2">
|
|
<ul className="text-sm divide-y">
|
|
<li>
|
|
<Link href="/minima-ccn/ccnsvp?embed=1" className="flex items-center justify-between py-2 px-2 hover:bg-slate-50 rounded">
|
|
<span className="font-semibold text-slate-900">CCNSVP</span>
|
|
<span className="text-xs text-slate-500">Spectacle vivant privé</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/minima-ccn/ccneac?embed=1" className="flex items-center justify-between py-2 px-2 hover:bg-slate-50 rounded">
|
|
<span className="font-semibold text-slate-900">CCNEAC</span>
|
|
<span className="text-xs text-slate-500">Entreprises artistiques et culturelles</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/minima-ccn/ccnpa?embed=1" className="flex items-center justify-between py-2 px-2 hover:bg-slate-50 rounded">
|
|
<span className="font-semibold text-slate-900">CCNPA</span>
|
|
<span className="text-xs text-slate-500">Production audiovisuelle</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|