Busyless

[gabrielaharumietecdeibate-beep]

import React, { useState } from "react";

// Busyless - Aplicativo Single-File React (Tailwind)
// -------------------------------
// Como usar:
// 1) Cole este arquivo em um projeto React (Create React App / Vite).
// 2) Certifique-se de que TailwindCSS esteja configurado no projeto
// (ou substitua classes Tailwind por suas próprias classes CSS).
// 3) Edite as seções marcadas com // -- EDITAR AQUI -- para personalizar.

export default function BusylessApp() {
// -- EDITAR AQUI --
// Cores / tema: você pode trocar a cor principal abaixo
const THEME = {
primary: "bg-green-600",
primaryText: "text-white",
accent: "bg-green-500",
muted: "text-gray-600",
};

// Estado: rotas de ônibus (exemplo inicial)
const [routes, setRoutes] = useState([
{ id: 1, name: "Linha 101 - Centro", schedule: "06:00 - 22:00" },
{ id: 2, name: "Linha 202 - Zona Sul", schedule: "05:30 - 23:00" },
]);

// Formulário de criação/edição
const [editing, setEditing] = useState(null);
const [form, setForm] = useState({ name: "", schedule: "" });

function startCreate() {
setEditing(null);
setForm({ name: "", schedule: "" });
document.getElementById("route-name")?.focus();
}

function startEdit(route) {
setEditing(route.id);
setForm({ name: route.name, schedule: route.schedule });
}

function saveRoute(e) {
e.preventDefault();
if (!form.name.trim()) return;
if (editing) {
setRoutes((r) => r.map((it) => (it.id === editing ? { ...it, ...form } : it)));
setEditing(null);
} else {
const id = Math.max(0, ...routes.map((r) => r.id)) + 1;
setRoutes((r) => [...r, { id, ...form }]);
}
setForm({ name: "", schedule: "" });
}

function removeRoute(id) {
if (!confirm("Remover rota?")) return;
setRoutes((r) => r.filter((it) => it.id !== id));
}

// -- FIM EDITAR --

return (

<header className={p-6 flex items-center justify-between ${THEME.primary} ${THEME.primaryText}}>

🚌

Busyless

Gerencie rotas de ônibus de forma simples

<button
onClick={startCreate}
className={px-4 py-2 rounded-lg font-medium shadow-sm ${THEME.accent} ${THEME.primaryText} hover:opacity-90}
>
+ Nova rota

<button
onClick={() => alert('Tema: verde — você pode editar THEME no código.')}
className="px-3 py-2 rounded-lg bg-white/10 text-white text-sm"
>
Tema

    <main className="p-6 bg-white">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Lista de rotas */}
        <section className="md:col-span-2">
          <h2 className="text-lg font-semibold mb-4">Rotas</h2>

          {routes.length === 0 ? (
            <div className="p-6 border border-dashed rounded-lg text-center text-gray-500">Nenhuma rota cadastrada.</div>
          ) : (
            <ul className="space-y-3">
              {routes.map((r) => (
                <li key={r.id} className="p-4 border rounded-lg flex items-start justify-between">
                  <div>
                    <div className="flex items-center gap-3">
                      <div className="text-2xl">🚍</div>
                      <div>
                        <div className="font-medium">{r.name}</div>
                        <div className="text-sm text-gray-500">{r.schedule}</div>
                      </div>
                    </div>
                  </div>

                  <div className="flex gap-2">
                    <button
                      onClick={() => startEdit(r)}
                      className="px-3 py-1 rounded-md border text-sm"
                    >
                      Editar
                    </button>
                    <button
                      onClick={() => removeRoute(r.id)}
                      className="px-3 py-1 rounded-md border text-sm text-red-600"
                    >
                      Remover
                    </button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </section>

        {/* Painel de criação/edição */}
        <aside className="md:col-span-1">
          <h3 className="text-md font-semibold mb-3">{editing ? "Editar rota" : "Criar rota"}</h3>

          <form onSubmit={saveRoute} className="space-y-3 bg-gray-50 p-4 rounded-lg">
            <div>
              <label className="block text-sm mb-1">Nome da rota</label>
              <input
                id="route-name"
                value={form.name}
                onChange={(e) => setForm((s) => ({ ...s, name: e.target.value }))}
                className="w-full p-2 border rounded-md"
                placeholder="Ex: Linha 301 - Estação"
              />
            </div>

            <div>
              <label className="block text-sm mb-1">Horário / Observações</label>
              <input
                value={form.schedule}
                onChange={(e) => setForm((s) => ({ ...s, schedule: e.target.value }))}
                className="w-full p-2 border rounded-md"
                placeholder="Ex: 06:00 - 22:00"
              />
            </div>

            <div className="flex gap-2">
              <button type="submit" className={`flex-1 py-2 rounded-md ${THEME.primary} ${THEME.primaryText} font-medium`}>
                {editing ? "Salvar" : "Adicionar"}
              </button>
              <button
                type="button"
                onClick={() => { setForm({ name: "", schedule: "" }); setEditing(null); }}
                className="py-2 px-4 rounded-md border"
              >
                Limpar
              </button>
            </div>
          </form>

          <div className="mt-4 text-sm text-gray-500">
            Dica: este painel é totalmente editável. Mude textos, cores e lógica conforme precisar.
          </div>
        </aside>
      </div>

      {/* Rodapé com infos rápidas */}
      <div className="mt-6 p-4 rounded-lg bg-green-50 border">
        <div className="flex items-center justify-between">
          <div>
            <strong>Busyless</strong>
            <div className="text-sm text-gray-600">App exemplo — tema ônibus</div>
          </div>
          <div className="text-sm text-gray-600">Versão demo</div>
        </div>
      </div>
    </main>
  </div>
</div>

);
}