wol / web / src / App.svelte

<script lang="ts">
  import { config } from "./lib/api";
  import Target from "./lib/Target.svelte";
  import ThemeProvider from "./lib/ThemeProvider.svelte";

  const targets = [
    ...Object.entries(config.targets)
      .filter(([k, v]) => config.pinned.includes(k))
      .sort(
        ([k1], [k2]) => config.pinned.indexOf(k1) - config.pinned.indexOf(k2),
      ),
    ...Object.entries(config.targets).filter(
      ([k]) => !config.pinned.includes(k),
    ),
  ];

  console.log(config);
</script>

<ThemeProvider />
<main>
  <div></div>
  <h1>
    {config.info.title}
    <img src="/favicon.ico" alt="" style:height="1ch" />
  </h1>
  <ul class="targets">
    {#each targets as [name, { mac, ip, url }]}
      <li>
        <Target {name} {mac} {ip} {url} />
      </li>
    {/each}
  </ul>
  <ul class="links">
    {#each config.info.links as [text, href]}
      <li><a {href}>{text}</a></li>
    {/each}
  </ul>
</main>

<style>
  main {
    max-width: 50ch;
    margin: 1rem auto;
    padding: 1rem;
    background: var(--theme-background-main);
    color: var(--theme-text);
    border-radius: 10px;
  }

  .targets {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 1rem;
    grid-auto-flow: row;
    padding-block: 1rem;
    list-style: none;
  }

  .links {
    display: flex;
    gap: 0.2rem 2rem;
    justify-content: center;
    align-items: center;
    list-style: none;
    flex-wrap: wrap;
  }
</style>