You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
55 lines
2.0 KiB
55 lines
2.0 KiB
import React from 'react';
|
|
import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
|
|
import {Tabs} from "./primitives/Layout";
|
|
import {HSColorPicker} from "./primitives/Forms";
|
|
import {IconElement} from "./primitives/Elements";
|
|
import SettingsPage from "./pages/SettingsPage";
|
|
import {LuciferIcon} from "./models/Icons";
|
|
|
|
const routeObj: HookRouter.RouteObject = {
|
|
"/": () => (
|
|
<div>
|
|
<HSColorPicker h={30} s={1} onChange={() => void (0)}/>
|
|
</div>
|
|
),
|
|
"/devices": () => (
|
|
<div>
|
|
<IconElement icon={LuciferIcon.Hexagon} caption="Grønn" color={{h: 125, s: 0.5}}/>
|
|
<IconElement icon={LuciferIcon.Square} caption="Kelvin 1k" color={{kelvin: 1000}}/>
|
|
<IconElement icon={LuciferIcon.Bulb} caption="Kelvin 2k" color={{kelvin: 2000}}/>
|
|
<IconElement icon={LuciferIcon.BulbGroup} caption="Kelvin 3k" color={{kelvin: 3000}}/>
|
|
<IconElement icon={LuciferIcon.Bridge} caption="Kelvin 4k" color={{kelvin: 4000}}/>
|
|
<IconElement caption="Kelvin 5k" color={{kelvin: 5000}}/>
|
|
<IconElement caption="Kelvin 6k" color={{kelvin: 6000}}/>
|
|
<IconElement caption="Kelvin 7k" color={{kelvin: 7000}}/>
|
|
<IconElement caption="Kelvin 8k" color={{kelvin: 8000}}/>
|
|
<IconElement caption="Kelvin 9k" color={{kelvin: 9000}}/>
|
|
<IconElement caption="Kelvin 10k" color={{kelvin: 10000}}/>
|
|
<IconElement caption="Mer" color="hs-gradient"/>
|
|
<IconElement caption="Mer" color="k-gradient"/>
|
|
</div>
|
|
),
|
|
"/settings": () => <SettingsPage/>,
|
|
}
|
|
|
|
const routeList = ["/", "/devices", "/settings"];
|
|
|
|
const tabNames = ["Lucifer", "Enheter", "Oppsett"];
|
|
|
|
function App() {
|
|
const route = useRoutes(routeObj);
|
|
const path = usePath();
|
|
|
|
return (
|
|
<div className="App">
|
|
<Tabs tabNames={tabNames}
|
|
index={routeList.indexOf(path)}
|
|
onChange={i => navigate(routeList[i])}
|
|
large boldIndex={0}
|
|
/>
|
|
{route || <div>B</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|