68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
interface Evento {
|
|
id: string;
|
|
data: string;
|
|
tipo: string;
|
|
descricao: string;
|
|
}
|
|
|
|
export const CalendarioAtendimentos: React.FC = () => {
|
|
const [eventos, setEventos] = useState<Evento[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchEventos() {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const res = await fetch('/api/eventos');
|
|
if (!res.ok) throw new Error('Erro ao buscar eventos');
|
|
const data = await res.json();
|
|
setEventos(data);
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchEventos();
|
|
}, []);
|
|
|
|
// Simulação de calendário mensal
|
|
const diasMes = Array.from({ length: 30 }, (_, i) => i + 1);
|
|
const mes = '06';
|
|
const ano = '2024';
|
|
|
|
if (loading) return <div>Carregando calendário...</div>;
|
|
if (error) return <div className="text-red-600">{error}</div>;
|
|
|
|
return (
|
|
<div className="border rounded p-4 shadow">
|
|
<div className="grid grid-cols-7 gap-2 mb-4">
|
|
{diasMes.map((dia) => {
|
|
const dataStr = `${ano}-${mes}-${dia.toString().padStart(2, '0')}`;
|
|
const eventosDia = eventos.filter(e => e.data === dataStr);
|
|
return (
|
|
<div key={dia} className={`h-16 flex flex-col items-center justify-center border rounded ${eventosDia.length ? 'bg-blue-50' : ''}`}>
|
|
<span className="font-bold text-xs">{dia}</span>
|
|
{eventosDia.map((ev) => (
|
|
<span key={ev.id} className="text-[10px] text-blue-700">{ev.tipo}</span>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold mb-2">Próximos eventos</h3>
|
|
<ul className="text-xs">
|
|
{eventos.map((ev) => (
|
|
<li key={ev.id} className="mb-1">{ev.data}: {ev.tipo} - {ev.descricao}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|