45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
|
|
const steps = [
|
|
{
|
|
title: "Pedido único, múltiplos laboratórios",
|
|
text: "A farmácia adiciona itens de diferentes fornecedores e o motor consolida fretes e SLAs por UF.",
|
|
},
|
|
{
|
|
title: "Roteamento e conformidade",
|
|
text: "Validação de lote, validade e regras ANVISA antes de liberar a ordem para cada laboratório parceiro.",
|
|
},
|
|
{
|
|
title: "Faturamento inteligente",
|
|
text: "Split automático e emissão de NF com impostos estaduais já calculados para cada remessa.",
|
|
},
|
|
{
|
|
title: "Status em tempo real",
|
|
text: "Acompanhamento unificado no painel da farmácia e webhooks para ERPs e aplicativos white-label.",
|
|
},
|
|
];
|
|
|
|
export default function FlowTicker() {
|
|
const [active, setActive] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(() => {
|
|
setActive((prev) => (prev + 1) % steps.length);
|
|
}, 3600);
|
|
return () => clearInterval(id);
|
|
}, []);
|
|
|
|
return (
|
|
<div class="ticker" aria-live="polite">
|
|
{steps.map((step, index) => (
|
|
<div class={`ticker-step ${index === active ? "active pulse" : ""}`} key={step.title}>
|
|
<span class="ticker-dot" aria-hidden="true" />
|
|
<div>
|
|
<strong>{step.title}</strong>
|
|
<p>{step.text}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|