52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useSyncExternalStore } from "react";
|
||
|
|
|
||
|
|
// Numéro inversé : jamais présent tel quel dans le HTML rendu côté serveur,
|
||
|
|
// et pas de correspondance grep directe. Il n'est reconstruit et injecté dans
|
||
|
|
// le DOM qu'après hydratation (client), pour l'impression du CV et le clic
|
||
|
|
// « Afficher ». Les harvesters qui n'exécutent pas de JS ne récupèrent rien.
|
||
|
|
const REV = "78 45 06 396 262+";
|
||
|
|
const subscribe = () => () => {};
|
||
|
|
|
||
|
|
export default function RevealPhone() {
|
||
|
|
const isClient = useSyncExternalStore(
|
||
|
|
subscribe,
|
||
|
|
() => true,
|
||
|
|
() => false,
|
||
|
|
);
|
||
|
|
const [shown, setShown] = useState(false);
|
||
|
|
|
||
|
|
if (!isClient) {
|
||
|
|
return <span className="text-muted">Afficher le numéro</span>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const display = REV.split("").reverse().join("");
|
||
|
|
const tel = display.replace(/\s/g, "");
|
||
|
|
const link = (
|
||
|
|
<a href={`tel:${tel}`} className="text-accent hover:underline">
|
||
|
|
{display}
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{/* Visible uniquement à l'impression / export PDF */}
|
||
|
|
<span className="hidden print:inline">{link}</span>
|
||
|
|
<span className="print:hidden">
|
||
|
|
{shown ? (
|
||
|
|
link
|
||
|
|
) : (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setShown(true)}
|
||
|
|
className="text-accent hover:underline"
|
||
|
|
>
|
||
|
|
Afficher le numéro
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|