80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
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>
|
|
`;
|
|
}
|