integrate sigproui

2026-03-18 23:23:39 +01:00
parent a070ceb3d4
commit e555dc5734
66 changed files with 29670 additions and 156 deletions
--- a/UI/App.js
+++ b/UI/App.js
@@ -0,0 +1,79 @@
+import { html, $ } from "sigpro";
+import buttonsPage from "./pages/buttons.js";
+import inputPage from "./pages/input.js";
+import checkboxPage from "./pages/checkbox.js";
+import "@components/Drawer.js";
+import "@components/Menu.js";
+
+// Configuración de rutas
+const routes = [
+  { path: "/", component: () => buttonsPage() },
+  { path: "/buttons", component: () => buttonsPage() },
+  { path: "/input", component: () => inputPage() },
+  { path: "/checkbox", component: () => checkboxPage() },
+];
+
+export default function App() {
+  const openMenu = $(false);
+
+  const menuConfig = [
+    { label: "Buttons", icon: "icon-[lucide--square]", href: "#/buttons" },
+    {
+      label: "Forms",
+      icon: "icon-[lucide--form-input]",
+      open: false,
+      sub: [
+        { label: "Input", href: "#/input" },
+        { label: "Checkbox", href: "#/checkbox" },
+        { label: "Radio", href: "#/radio" },
+        { label: "Range", href: "#/range" },
+        { label: "Rating", href: "#/rating" },
+        { label: "Color Picker", href: "#/colorpicker" },
+        { label: "Date Picker", href: "#/datepicker" },
+      ],
+    },
+    {
+      label: "Display",
+      icon: "icon-[lucide--layout]",
+      open: false,
+      sub: [
+        { label: "Card", href: "#/card" },
+        { label: "Tabs", href: "#/tabs" },
+        { label: "Loading", href: "#/loading" },
+      ],
+    },
+    {
+      label: "Feedback",
+      icon: "icon-[lucide--message-circle]",
+      open: false,
+      sub: [
+        { label: "Toast", href: "#/toast" },
+        { label: "Dialog", href: "#/dialog" },
+        { label: "FAB", href: "#/fab" },
+        { label: "Dropdown", href: "#/dropdown" },
+      ],
+    },
+    { label: "About", icon: "icon-[lucide--info]", href: "#/about" },
+  ];
+
+  return html`
+    <div class="min-h-screen bg-base-100 text-base-content transition-colors duration-300">
+      <header class="navbar bg-base-200 justify-between shadow-xl px-4">
+        <div class="flex items-center gap-2">
+          <button class="btn btn-ghost" @click=${() => openMenu(!openMenu())}>
+            <span class="icon-[lucide--menu] size-5"></span>
+          </button>
+          <span class="font-bold text-lg">SigProUI</span>
+        </div>
+      </header>
+
+      <c-drawer .open=${openMenu} @change=${(e) => openMenu(false)}>
+        <c-menu cls="menu-lg" .items=${menuConfig} @select=${() => openMenu(false)}></c-menu>
+      </c-drawer>
+
+      <main class="p-4 flex flex-col gap-4 mx-auto w-full max-w-7xl">
+        <div class="p-4 bg-base-100 rounded-box shadow-sm">${$.router(routes)}</div>
+      </main>
+    </div>
+  `;
+}