started on icons
This commit is contained in:
+18
-16
@@ -2,7 +2,9 @@ import React from 'react';
|
||||
import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
|
||||
import {Tabs} from "./primitives/Layout";
|
||||
import {HSColorPicker} from "./primitives/Forms";
|
||||
import {ColorElement} from "./primitives/Elements";
|
||||
import {IconElement} from "./primitives/Elements";
|
||||
import SettingsPage from "./pages/SettingsPage";
|
||||
import {LuciferIcon} from "./models/Icons";
|
||||
|
||||
const routeObj: HookRouter.RouteObject = {
|
||||
"/": () => (
|
||||
@@ -12,22 +14,22 @@ const routeObj: HookRouter.RouteObject = {
|
||||
),
|
||||
"/devices": () => (
|
||||
<div>
|
||||
<ColorElement name="Grønn" value={{h: 125, s: 0.5}}/>
|
||||
<ColorElement name="Kelvin 1k" value={{kelvin: 1000}}/>
|
||||
<ColorElement name="Kelvin 2k" value={{kelvin: 2000}}/>
|
||||
<ColorElement name="Kelvin 3k" value={{kelvin: 3000}}/>
|
||||
<ColorElement name="Kelvin 4k" value={{kelvin: 4000}}/>
|
||||
<ColorElement name="Kelvin 5k" value={{kelvin: 5000}}/>
|
||||
<ColorElement name="Kelvin 6k" value={{kelvin: 6000}}/>
|
||||
<ColorElement name="Kelvin 7k" value={{kelvin: 7000}}/>
|
||||
<ColorElement name="Kelvin 8k" value={{kelvin: 8000}}/>
|
||||
<ColorElement name="Kelvin 9k" value={{kelvin: 9000}}/>
|
||||
<ColorElement name="Kelvin 10k" value={{kelvin: 10000}}/>
|
||||
<ColorElement name="Mer... (HS)" value="hs-gradient"/>
|
||||
<ColorElement name="Mer... (K)" value="k-gradient"/>
|
||||
<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": () => <div>3</div>,
|
||||
"/settings": () => <SettingsPage/>,
|
||||
}
|
||||
|
||||
const routeList = ["/", "/devices", "/settings"];
|
||||
@@ -43,7 +45,7 @@ function App() {
|
||||
<Tabs tabNames={tabNames}
|
||||
index={routeList.indexOf(path)}
|
||||
onChange={i => navigate(routeList[i])}
|
||||
boldIndex={0}
|
||||
large boldIndex={0}
|
||||
/>
|
||||
{route || <div>B</div>}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user