41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
|
import { useWizardStore } from './store/wizardStore';
|
||
|
|
import CategorySelection from './pages/Steps/CategorySelection';
|
||
|
|
import OperationSelection from './pages/Steps/OperationSelection';
|
||
|
|
import AttributeForm from './pages/Steps/AttributeForm';
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const step = useWizardStore((state) => state.step);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
|
||
|
|
<header className="bg-white border-b border-slate-200 sticky top-0 z-10">
|
||
|
|
<div className="max-w-3xl mx-auto px-4 h-16 flex items-center justify-between">
|
||
|
|
<div className="font-bold text-xl tracking-tight text-brand-600">
|
||
|
|
SIG-CM <span className="text-slate-400 font-normal text-sm ml-2">Wizard de Publicación</span>
|
||
|
|
</div>
|
||
|
|
<div className="text-sm font-medium text-slate-500">
|
||
|
|
Paso {step} de 5
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/* Progress Bar */}
|
||
|
|
<div className="h-1 bg-slate-100 w-full">
|
||
|
|
<div
|
||
|
|
className="h-full bg-brand-500 transition-all duration-500 ease-out"
|
||
|
|
style={{ width: `${(step / 5) * 100}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main className="max-w-3xl mx-auto p-4 py-8">
|
||
|
|
{step === 1 && <CategorySelection />}
|
||
|
|
{step === 2 && <OperationSelection />}
|
||
|
|
{step === 3 && <AttributeForm />}
|
||
|
|
{step === 4 && <div className="text-center py-20">Paso 4: Fotos (Coming Soon)</div>}
|
||
|
|
{step === 5 && <div className="text-center py-20">Paso 5: Resumen y Pago (Coming Soon)</div>}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|