119 lines
4.0 KiB
TypeScript
119 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useRef, type ChangeEvent } from "react";
|
|
import { Download, FileText, Printer, RotateCcw, Upload } from "lucide-react";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { normalizeCVCareerData } from "@/lib/storage";
|
|
import type { CVCareerData } from "@/lib/types/cv";
|
|
|
|
interface CvToolbarProps {
|
|
onReset: () => void;
|
|
data: CVCareerData;
|
|
onImport: (value: CVCareerData) => void;
|
|
}
|
|
|
|
export function CvToolbar({ onReset, data, onImport }: CvToolbarProps) {
|
|
const pathname = usePathname();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
function handleExport() {
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = "cv-maker.json";
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function handleImportFile(event: ChangeEvent<HTMLInputElement>) {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = "";
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
try {
|
|
const parsed: unknown = JSON.parse(String(reader.result));
|
|
const value = normalizeCVCareerData(parsed);
|
|
if (value === null) {
|
|
window.alert("Fichier invalide : ce n'est pas un CV au format attendu.");
|
|
return;
|
|
}
|
|
if (window.confirm("Importer ce CV ? Le contenu actuel sera remplacé.")) {
|
|
onImport(value);
|
|
}
|
|
} catch {
|
|
window.alert("Fichier illisible : le JSON est invalide.");
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
return (
|
|
<header className="print-hidden sticky top-0 z-10 flex flex-wrap items-center justify-between gap-3 border-b border-border bg-white px-6 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="flex h-8 w-8 items-center justify-center rounded-md bg-accent text-white">
|
|
<FileText size={18} aria-hidden />
|
|
</span>
|
|
<span className="text-base font-bold text-ink">CV-Maker</span>
|
|
</div>
|
|
|
|
<nav className="flex flex-wrap items-center gap-2">
|
|
<Button variant="ghost" size="sm" onClick={() => window.print()} title="Imprimer ou exporter en PDF">
|
|
<Printer size={14} aria-hidden />
|
|
Imprimer / PDF
|
|
</Button>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="application/json,.json"
|
|
className="hidden"
|
|
onChange={handleImportFile}
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
title="Importer un CV depuis un fichier JSON"
|
|
>
|
|
<Upload size={14} aria-hidden />
|
|
Importer JSON
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={handleExport} title="Télécharger le CV au format JSON">
|
|
<Download size={14} aria-hidden />
|
|
Exporter JSON
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
title="Réinitialiser le CV"
|
|
onClick={() => {
|
|
if (window.confirm("Réinitialiser tout le contenu du CV ?")) onReset();
|
|
}}
|
|
>
|
|
<RotateCcw size={14} aria-hidden />
|
|
Réinitialiser
|
|
</Button>
|
|
{[
|
|
{ href: "/documentation", label: "Documentation" },
|
|
].map(({ href, label: linkLabel }) => {
|
|
const active = pathname === href;
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
|
|
active ? "bg-accent text-white" : "text-muted hover:text-ink"
|
|
}`}
|
|
>
|
|
{linkLabel}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</header>
|
|
);
|
|
} |