387 lines
14 KiB
TypeScript
387 lines
14 KiB
TypeScript
|
|
import Input from '@/components/common/Input'
|
|
|
|
interface TemplateEditorProps {
|
|
tipo: string
|
|
config: Record<string, any>
|
|
onChange: (config: Record<string, any>) => void
|
|
}
|
|
|
|
export default function TemplateEditor({ tipo, config, onChange }: TemplateEditorProps) {
|
|
const handleColorChange = (key: string, value: string) => {
|
|
onChange({ ...config, [key]: value })
|
|
}
|
|
|
|
const handleTextChange = (key: string, value: string) => {
|
|
onChange({ ...config, [key]: value })
|
|
}
|
|
|
|
const renderEditorByType = () => {
|
|
switch (tipo) {
|
|
case 'capa':
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor Primária
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corPrimaria || '#1a365d'}
|
|
onChange={(e) => handleColorChange('corPrimaria', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor Secundária
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corSecundaria || '#2b6cb0'}
|
|
onChange={(e) => handleColorChange('corSecundaria', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer"
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Título Principal"
|
|
value={config.titulo || ''}
|
|
onChange={(e) => handleTextChange('titulo', e.target.value)}
|
|
placeholder="Ex: BUZIOS 7 PRODUCTION SYSTEM"
|
|
/>
|
|
|
|
<Input
|
|
label="Subtítulo"
|
|
value={config.subtitulo || ''}
|
|
onChange={(e) => handleTextChange('subtitulo', e.target.value)}
|
|
placeholder="Ex: AR HEAD FABRICATION"
|
|
/>
|
|
|
|
<Input
|
|
label="Cliente"
|
|
value={config.cliente || ''}
|
|
onChange={(e) => handleTextChange('cliente', e.target.value)}
|
|
placeholder="Ex: SAIPEM"
|
|
/>
|
|
|
|
<Input
|
|
label="Número do Documento"
|
|
value={config.numeroDocumento || ''}
|
|
onChange={(e) => handleTextChange('numeroDocumento', e.target.value)}
|
|
placeholder="Ex: DB-B97-01_S1_VENDOR_DATABOOK"
|
|
/>
|
|
|
|
<Input
|
|
label="Contrato"
|
|
value={config.contrato || ''}
|
|
onChange={(e) => handleTextChange('contrato', e.target.value)}
|
|
placeholder="Ex: OC 1472739"
|
|
/>
|
|
|
|
<Input
|
|
label="Fornecedor"
|
|
value={config.fornecedor || ''}
|
|
onChange={(e) => handleTextChange('fornecedor', e.target.value)}
|
|
placeholder="Ex: ENGEMETAL"
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
case 'indice':
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor do Título
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corTitulo || '#1a365d'}
|
|
onChange={(e) => handleColorChange('corTitulo', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor da Linha Divisória
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corLinha || '#2b6cb0'}
|
|
onChange={(e) => handleColorChange('corLinha', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={config.bilingue || false}
|
|
onChange={(e) => handleColorChange('bilingue', e.target.checked ? 'true' : 'false')}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Bilíngue (PT/EN)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<Input
|
|
label="Título do Índice"
|
|
value={config.titulo || 'ÍNDICE / TABLE OF CONTENTS'}
|
|
onChange={(e) => handleTextChange('titulo', e.target.value)}
|
|
placeholder="Título do índice"
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
case 'divisora':
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Estilo da Divisora
|
|
</label>
|
|
<select
|
|
value={config.estilo || 'minimalista'}
|
|
onChange={(e) => handleColorChange('estilo', e.target.value)}
|
|
className="input-field"
|
|
>
|
|
<option value="minimalista">Minimalista</option>
|
|
<option value="lateral">Lateral</option>
|
|
<option value="corporativa">Corporativa</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor Primária
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corPrimaria || '#1a365d'}
|
|
onChange={(e) => handleColorChange('corPrimaria', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor Secundária
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corSecundaria || '#2b6cb0'}
|
|
onChange={(e) => handleColorChange('corSecundaria', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={config.bilingue || false}
|
|
onChange={(e) => handleColorChange('bilingue', e.target.checked ? 'true' : 'false')}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Bilíngue (PT/EN)</span>
|
|
</label>
|
|
</div>
|
|
|
|
<Input
|
|
label="Ícone da Seção"
|
|
value={config.icone || '📑'}
|
|
onChange={(e) => handleTextChange('icone', e.target.value)}
|
|
placeholder="Ex: 📑, 🔩, ⚡"
|
|
maxLength={2}
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
case 'cabecalho':
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor da Borda
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corBorda || '#2b6cb0'}
|
|
onChange={(e) => handleColorChange('corBorda', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Altura (px)"
|
|
type="number"
|
|
value={config.altura || 60}
|
|
onChange={(e) => handleTextChange('altura', e.target.value)}
|
|
placeholder="60"
|
|
/>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Estilo
|
|
</label>
|
|
<select
|
|
value={config.estilo || 'simples'}
|
|
onChange={(e) => handleColorChange('estilo', e.target.value)}
|
|
className="input-field"
|
|
>
|
|
<option value="simples">Simples</option>
|
|
<option value="completo">Completo com Logo</option>
|
|
<option value="minimalista">Minimalista</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
case 'rodape':
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor da Borda
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corBorda || '#cbd5e0'}
|
|
onChange={(e) => handleColorChange('corBorda', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Altura (px)"
|
|
type="number"
|
|
value={config.altura || 40}
|
|
onChange={(e) => handleTextChange('altura', e.target.value)}
|
|
placeholder="40"
|
|
/>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Estilo
|
|
</label>
|
|
<select
|
|
value={config.estilo || 'simples'}
|
|
onChange={(e) => handleColorChange('estilo', e.target.value)}
|
|
className="input-field"
|
|
>
|
|
<option value="simples">Simples</option>
|
|
<option value="completo">Completo</option>
|
|
<option value="minimalista">Minimalista</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={config.mostrarPagina || true}
|
|
onChange={(e) => handleColorChange('mostrarPagina', e.target.checked ? 'true' : 'false')}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Mostrar Número da Página</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
case 'guia_estilo':
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor Primária
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corPrimaria || '#1a365d'}
|
|
onChange={(e) => handleColorChange('corPrimaria', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor Secundária
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corSecundaria || '#2b6cb0'}
|
|
onChange={(e) => handleColorChange('corSecundaria', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
Cor de Destaque
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={config.corDestaque || '#4299e1'}
|
|
onChange={(e) => handleColorChange('corDestaque', e.target.value)}
|
|
className="w-full h-10 rounded border border-gray-300 dark:border-gray-600 cursor-pointer bg-white dark:bg-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
label="Fonte Principal"
|
|
value={config.fontePrincipal || 'Roboto'}
|
|
onChange={(e) => handleTextChange('fontePrincipal', e.target.value)}
|
|
placeholder="Ex: Roboto, Arial"
|
|
/>
|
|
|
|
<Input
|
|
label="Fonte Secundária"
|
|
value={config.fonteSecundaria || 'Open Sans'}
|
|
onChange={(e) => handleTextChange('fonteSecundaria', e.target.value)}
|
|
placeholder="Ex: Open Sans, Helvetica"
|
|
/>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={config.incluirPaleta || true}
|
|
onChange={(e) => handleColorChange('incluirPaleta', e.target.checked ? 'true' : 'false')}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Incluir Paleta de Cores</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={config.incluirTipografia || true}
|
|
onChange={(e) => handleColorChange('incluirTipografia', e.target.checked ? 'true' : 'false')}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">Incluir Tipografia</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
default:
|
|
return <p className="text-gray-500 dark:text-gray-400">Selecione um tipo de template</p>
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 space-y-4">
|
|
<h3 className="font-semibold text-gray-900 dark:text-gray-100">Configurações do Template</h3>
|
|
{renderEditorByType()}
|
|
</div>
|
|
)
|
|
}
|