yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Webview: bootstrap layout

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-05-29 16:40:20 +02:00
parent 3f5ca3f5fa
commit 5caba68a54
17 changed files with 407 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
pkgs/webview-ui/app/src/App.tsx
View File

@@ -1,59 +1,18 @@
import { Match, Switch, createSignal, type Component } from "solid-js";
import { createSignal, type Component } from "solid-js";
import { CountProvider } from "./Config";
// import { Nested } from "./nested";
import { Layout } from "./layout/layout";
import cx from "classnames";
import { Nested } from "./nested";
import { Route, Router } from "./Routes";
type Route = "home" | "machines";
// Global state
const [route, setRoute] = createSignal<Route>("machines");
export { route, setRoute };
const App: Component = () => {
const [route, setRoute] = createSignal<Route>("home");
return (
<CountProvider>
<Layout>
<div class="col-span-1">
<div class={cx("text-zinc-500")}>Navigation</div>
<ul>
<li>
<button
onClick={() => setRoute("home")}
classList={{ "bg-blue-500": route() === "home" }}
>
Home
</button>
</li>
<li>
{" "}
<button
onClick={() => setRoute("machines")}
classList={{ "bg-blue-500": route() === "machines" }}
>
Machines
</button>
</li>
</ul>
</div>
<div class="col-span-7">
<div>{route()}</div>
<Switch fallback={<p>{route()} not found</p>}>
<Match when={route() == "home"}>
<Nested />
</Match>
<Match when={route() == "machines"}>
<div class="grid grid-cols-3 gap-2">
<div class="h-10 w-20 bg-red-500">red</div>
<div class="h-10 w-20 bg-green-500">green</div>
<div class="h-10 w-20 bg-blue-500">blue</div>
<div class="h-10 w-20 bg-yellow-500">yellow</div>
<div class="h-10 w-20 bg-purple-500">purple</div>
<div class="h-10 w-20 bg-cyan-500">cyan</div>
<div class="h-10 w-20 bg-pink-500">pink</div>
</div>
</Match>
</Switch>
</div>
<Router route={route} />
</Layout>
</CountProvider>
);