liljudd-website/src/routes/config/[guildId].tsx

import "../styles/pages/config.scss";

function config() {
  return (
    <div>
      <h3 class={"centered"}>Configure li&apos;l Judd in</h3>
      <div class={"config"}>
        <div>
          <div class={"horizontal centered"}>
            <img
              class={"guildpfp"}
              src="https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
              alt="Server pfp"
            />
            <h1>li'l Judds home base</h1>
          </div>
        </div>

        <article>
          <h2>Timezone</h2>
          <p>Set the timezone for your server.</p>
          <label>
            <select>
              <option value="-1">UTC-1:00</option>
              <option value="0">UTC+0:00</option>
              <option value="1">UTC+1:00</option>
            </select>
          </label>
        </article>
        <section>
          <div class={"centered"}>
            <h2>Features</h2>
            <p>Configure the features of the bot</p>
          </div>
          <article>
            <div class={"horizontal"}>
              <h3>Time Planning</h3>
              <input type="checkbox" id="time planning" />
            </div>
            <label class={"horizontal"}>
              <p class={"marg_right_5px"}>Target channel:</p>
              <select>
                <option value="id">Channel 1</option>
                <option value="id">Channel 2</option>
                <option value="id">Channel 3</option>
                <option value="id">Channel 4</option>
              </select>
            </label>
            <div class={"horizontal"}>
              <h4>Enable pingable Roles</h4>
              <input type="checkbox" id="pingableroles" />
            </div>
          </article>
        </section>
        <button>Apply</button>
      </div>
    </div>
  );
}

export default config;