noctbot/web/src/routes/dashboard/contest/_components/AddContestForm.svelte

<script>
  import EmojiSelector from "./EmojiSelector.svelte";
  import DurationInput from "./DurationInput.svelte";

  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  function submit(e) {
    e.preventDefault();
  }
</script>

<style>
  div.emoji-selector {
    @apply .flex;

    & input[type="radio"] {
      @apply hidden;
    }
  }

  input[type="submit"] {
    flex-grow: 0 !important;
  }

  span.info {
    @əpply italic pl-10;
  }
</style>

<form class="form-ctrl" on:submit={submit}>
  <div>
    <label for="channel-id">Channel</label>
    <select id="channel-id">
      <option value="01312">#test</option>
      <option value="01313">#test2</option>
      <option value="01314">#test3</option>
    </select>
  </div>
  <div>
    <label for="entry-duration">Entry duration</label>
    <DurationInput id="entry-duration" unitId="entry-duration-unit" />
  </div>
  <div>
    <label for="voting-duration">Voting duration</label>
    <DurationInput id="voting-duration" unitId="voting-duration-unit" />
  </div>
  <div>
    <div>Voting emoji</div>
    <EmojiSelector />
  </div>
  <div>
    <label for="max-winners">Max winners</label>
    <input
      id="max-winners"
      name="max-winners"
      type="number"
      step="1"
      min="1"
      value="1" />
  </div>
  <div>
    <div />
    <input class="btn" type="submit" value="Create competition" />
  </div>
</form>