noctbot/web/src/routes/dashboard/contest/index.svelte

<script>
  import ContestTable from "./_components/ContestTable.svelte";
  import AddContestForm from "./_components/AddContestForm.svelte";

  let contests = [
    {
      id: 1,
      channel: "#channel1",
      started: new Date(),
      entryDuration: "1d",
      voteDuration: "1d",
      winners: ["link1", "link2", "link3"]
    },
    {
      id: 2,
      channel: "#channel1",
      started: new Date(),
      entryDuration: "1d",
      voteDuration: "1d",
      winners: ["link1", "link2", "link3"]
    },
    {
      id: 3,
      channel: "#channel1",
      started: new Date(),
      entryDuration: "1d",
      voteDuration: "1d",
      winners: ["link1", "link2", "link3"]
    }
  ];

  let showAddContest = false;

  function toggleAddContest() {
    showAddContest = !showAddContest;
  }

  function contestAdded(newContest) {
    contests = [newContest, ...contests];
  }
</script>

<style lang="css">
  h2 {
    @apply .text-xl .font-bold;
  }
</style>

<svelte:head>
  <title>Contest control</title>
</svelte:head>
<div class="nav-content">
  <h2>Actions</h2>
  <div class="pb-5">
    <button on:click={toggleAddContest} class="btn">Add contest</button>
    {#if showAddContest}
      <AddContestForm on:contestAdded={contestAdded} />
    {/if}
  </div>

  <h2>Current contests</h2>
  <ContestTable {contests}/>
</div>