---
---

<RootLayout>
    <div class="min-h-[80vh] flex flex-col items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
      <h3 class="font-bold text-xl text-black dark:text-white text-center">
        Better Auth.
      </h3>
      <p class="text-center break-words text-sm md:text-base">
        Official astro
        <a
          href="https://better-auth.com"
          target="_blank"
          class="italic underline"
        >
          better-auth
        </a>{" "}
        example. <br />
      </p> 
      <a href="/sign-in">
        <button
        id="login"
        class="bg-black mt-3 flex items-center gap-2 rounded-sm py-2 px-3 text-white text-sm"
      >
        Sign In
      </button>  
  </a>    

  <a href="/dashboard">
    <button
    id="dashboard"
    class="bg-black mt-3 flex items-center gap-2 rounded-sm py-2 px-3 text-white text-sm"
  >
    Dashboard
  </button> 
</a>
  </div>
  <script>
    import { useVanillaSession } from "../libs/auth-client";
    useVanillaSession.subscribe((val) => {
      if (val.data) {
        document.getElementById("login")!.style.display = "none";
        document.getElementById("dashboard")!.style.display = "flex";
      } else {
        if(val.error){
          document.getElementById("login")!.style.display = "flex";
          document.getElementById("dashboard")!.style.display = "none";
        }
      }
    }); 
  </script>  
</RootLayout>

