<script lang="typescript">
  import Icon from "svelte-awesome/components/Icon.svelte";
  import { faDiscord } from "@fortawesome/free-brands-svg-icons";
  import ExampleComponent from "../components/ExampleComponent.svelte";

  const discordIcon = (faDiscord as unknown) as undefined;
</script>

<svelte:head>
  <title>Index</title>
</svelte:head>

<div class="bg-gray-800 rounded-sm text-center px-20 py-5 shadow-lg">
  <h1 class="text-white text-4xl font-light">Login</h1>
  <p class="px-10 py-5">
    <a
      class="text-sm bg-blue-700 hover:bg-blue-800 p-2 text-white
        hover:text-gray-100 rounded-sm"
      href="/login/discord">
      <Icon data={discordIcon} />
      Login with Discord
    </a>
  </p>
</div>
