diff --git a/examples/boilerplates/react-buildless/index.html b/examples/boilerplates/react-buildless/index.html index dc1a3530..31f61c61 100644 --- a/examples/boilerplates/react-buildless/index.html +++ b/examples/boilerplates/react-buildless/index.html @@ -1,7 +1,11 @@ - - -
+ + + + + + + + + +
+ diff --git a/examples/boilerplates/solid-ts/my-window.zebar.json b/examples/boilerplates/solid-ts/my-window.zebar.json index 88ce7806..48bdd0f2 100644 --- a/examples/boilerplates/solid-ts/my-window.zebar.json +++ b/examples/boilerplates/solid-ts/my-window.zebar.json @@ -10,10 +10,10 @@ "placements": [ { "anchor": "top_left", - "offsetX": "20px", - "offsetY": "20px", + "offsetX": "0px", + "offsetY": "0px", "width": "100%", - "height": "30px", + "height": "40px", "monitorSelection": { "type": "all" } diff --git a/examples/boilerplates/solid-ts/src/index.css b/examples/boilerplates/solid-ts/src/index.css index de672762..a81cadc7 100644 --- a/examples/boilerplates/solid-ts/src/index.css +++ b/examples/boilerplates/solid-ts/src/index.css @@ -1,3 +1,23 @@ +body { + color: rgb(255 255 255 / 90%); + font-family: ui-monospace, monospace; + font-size: 12px; +} + +html, +body, +#root { + height: 100%; +} + .app { text-align: center; } + +.chip { + display: inline-block; + padding: 4px 8px; + border-radius: 4px; + background: rgb(84, 66, 220); + margin-right: 4px; +} diff --git a/examples/boilerplates/solid-ts/src/index.tsx b/examples/boilerplates/solid-ts/src/index.tsx index 0169b3a4..fd010218 100644 --- a/examples/boilerplates/solid-ts/src/index.tsx +++ b/examples/boilerplates/solid-ts/src/index.tsx @@ -5,6 +5,7 @@ import { createStore } from 'solid-js/store'; import { init } from 'zebar'; const zebarCtx = await init(); + const [cpu, battery, memory, weather] = await Promise.all([ zebarCtx.createProvider({ type: 'cpu' }), zebarCtx.createProvider({ type: 'battery' }), @@ -15,25 +16,26 @@ const [cpu, battery, memory, weather] = await Promise.all([ render(() => , document.getElementById('root')!); function App() { - const [store, setStore] = createStore({ + const [outputs, setOutputs] = createStore({ cpu: cpu.output, battery: battery.output, memory: memory.output, weather: weather.output, }); - cpu.onOutput(cpu => setStore({ cpu })); - battery.onOutput(battery => setStore({ battery })); - memory.onOutput(memory => setStore({ memory })); - weather.onOutput(weather => setStore({ weather })); + cpu.onOutput(cpu => setOutputs({ cpu })); + battery.onOutput(battery => setOutputs({ battery })); + memory.onOutput(memory => setOutputs({ memory })); + weather.onOutput(weather => setOutputs({ weather })); return ( -
- cpu: {store.cpu.usage} - battery: {store.battery?.chargePercent} - memory: {store.memory.usage} - weather temp: {store.weather.celsiusTemp} - weather status: {store.weather.status} +
+
CPU usage: {outputs.cpu.usage}
+
+ Battery charge: {outputs.battery?.chargePercent} +
+
Memory usage: {outputs.memory.usage}
+
Weather temp: {outputs.weather?.celsiusTemp}
); }