62 lines
2.7 KiB
JavaScript
62 lines
2.7 KiB
JavaScript
import { useEffect } from 'react';
|
|
|
|
/**
|
|
* Hook para gerenciar os metadados do documento (Título e Favicon)
|
|
* baseado no ambiente e na página atual.
|
|
*
|
|
* @param {string} title - O título da página
|
|
* @param {'fleet' | 'finance' | 'rh' | 'login'} type - O tipo de ambiente para o favicon
|
|
*/
|
|
export const useDocumentMetadata = (title, type) => {
|
|
useEffect(() => {
|
|
// 1. Atualizar o Título
|
|
if (title) {
|
|
document.title = title;
|
|
}
|
|
|
|
// 2. Atualizar o Favicon (SVG dinâmico baseado no tipo)
|
|
if (type) {
|
|
const updateFavicon = () => {
|
|
const colors = {
|
|
fleet: '#10b981', // Emerald 500
|
|
finance: '#059669', // Emerald 600
|
|
rh: '#10b981', // Emerald 500 (alinhado com o tema do ambiente RH)
|
|
prafrot: '#eab308', // Yellow 500
|
|
login: '#64748b', // Slate 500
|
|
};
|
|
|
|
const iconPaths = {
|
|
fleet: '<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" fill="none" stroke="white" stroke-width="2.5"/><circle cx="7" cy="18" r="2" fill="white"/><circle cx="17" cy="18" r="2" fill="white"/><path d="M13 18h7a2 2 0 0 0 2-2V9l-3-3h-6" fill="none" stroke="white" stroke-width="2.5"/>',
|
|
finance: '<path d="M3 21h18" stroke="white" stroke-width="2.5"/><path d="M9 8h6" stroke="white" stroke-width="2.5"/><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16" stroke="white" stroke-width="2.5"/><path d="M9 12h6" stroke="white" stroke-width="2.5"/><path d="M9 16h6" stroke="white" stroke-width="2.5"/>',
|
|
rh: '<rect x="2" y="7" width="20" height="14" rx="2" ry="2" stroke="white" stroke-width="2.5" fill="none"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" stroke="white" stroke-width="2.5" fill="none"/>',
|
|
login: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="white" stroke-width="2.5" fill="none"/><path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="white" stroke-width="2.5" fill="none"/>'
|
|
};
|
|
|
|
const color = colors[type] || colors.login;
|
|
const path = (type === 'prafrot') ? iconPaths.fleet : (iconPaths[type] || iconPaths.login);
|
|
|
|
const svg = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<rect width="24" height="24" rx="6" fill="${color}"/>
|
|
<g transform="scale(0.6) translate(8, 8)">
|
|
${path}
|
|
</g>
|
|
</svg>
|
|
`.replace(/\s+/g, ' ').trim();
|
|
|
|
const dataUrl = `data:image/svg+xml;base64,${btoa(svg)}`;
|
|
|
|
let link = document.querySelector("link[rel*='icon']");
|
|
if (!link) {
|
|
link = document.createElement('link');
|
|
link.rel = 'icon';
|
|
document.head.appendChild(link);
|
|
}
|
|
link.href = dataUrl;
|
|
};
|
|
|
|
updateFavicon();
|
|
}
|
|
}, [title, type]);
|
|
};
|