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.

30 lines
814 B

  1. <script lang="ts">
  2. import DeviceIcon from "$lib/components/DeviceIcon.svelte";
  3. import Lamp, { DARK_COLOR } from "$lib/components/Lamp.svelte";
  4. import { getStateContext } from "$lib/contexts/StateContext.svelte";
  5. import { rgb } from "$lib/models/color";
  6. const {deviceList, roomList} = getStateContext();
  7. </script>
  8. <div class="page">
  9. {#each $deviceList as device (device.id) }
  10. <Lamp compact={device.name.includes("Square")} device={device} />
  11. {/each}
  12. </div>
  13. <div class="page" style="font-size: 8em">
  14. <DeviceIcon name="hue_go" brightColor={rgb(0.517,0.537,1.000)} darkColor={DARK_COLOR} />
  15. </div>
  16. <style>
  17. div.page {
  18. margin: 0 auto;
  19. width: 100ch;
  20. max-width: 95%;
  21. margin-top: 1em;
  22. font-size: 2em;
  23. display: flex;
  24. flex-direction: row;
  25. flex-wrap: wrap;
  26. }
  27. </style>