import Layout from "~/components/Layout";
import "../styles/pages/how-do-i.scss";

function howDoI() {
  return (
    <Layout site="how-do-i">
      <h1>How do I...?</h1>
      <section>
        <h2>.. enable / disable certain features?</h2>
        <p>
          Features can be enabled and disables using the <code>/feature</code>
          command.
          <br />
          Example:
        </p>
        <div class="imgwrapper">
          <img
            class="desktop"
            src="/assets/screenshots/featureexample.png"
            alt="A screenshot of the example in Discord."
          />
          <img
            class="mobile"
            src="/assets/screenshots/featureexamplemobile.png"
            alt="A screenshot of the example in Discord."
          />
          {/* <p><code>/feature feature:Time Planning Feature set:Enable channel:#ich-kann-heute</code></p> */}
        </div>
      </section>
      <section>
        <h2>.. create a match?</h2>
        <p>
          You can create a match time using the <code>/match</code> command.
          <br />
          Example:
        </p>
        <div class="imgwrapper">
          <img
            class="desktop"
            src="/assets/screenshots/matchexample.png"
            alt="A screenshot of the example in Discord."
          />
          <img
            class="mobile"
            src="/assets/screenshots/matchexamplemobile.png"
            alt="A screenshot of the example in Discord."
          />
          {/* <p><code>/match match:Ladder Match timestamp:24.12.2069 04:20 opponent:Forbidden</code></p> */}
        </div>
      </section>
      <section class="note">
        <p>
          Is something missing here?
          <br />
          Please <a href="/contact">contact me</a>!
        </p>
      </section>
    </Layout>
  );
}

export default howDoI;