postdown/islands/WelcomeFrame.tsx

import { asset } from "fresh/runtime";
import Button from "../components/form/Button.tsx";
import ThemeToggle from "./ThemeToggle.tsx";

export default function WelcomeFrame() {
  const goLogin = () => {
    location.href = "/login";
  };

  const goRegister = () => {
    location.href = "/register";
  };

  return (
    <div className="flex items-center justify-center flex-col w-full h-full relative">
      <div className="absolute top-0 right-0">
        <ThemeToggle />
      </div>
      <div className="flex items-center">
        <img
          className="w-32 h-32 mr-2 dark:invert"
          src={asset("/postdown.png")}
          alt="Postdown"
        />
        <h1>Postdown</h1>
      </div>
      <span className="text-xl mb-8">
        A web-based, shareable, self-hosted Markdown editor built with deno
      </span>
      <div>
        <Button
          type="button"
          className="w-32 mx-2"
          onClick={goLogin}
        >
          Login
        </Button>
        <Button
          type="button"
          className="w-32 mx-2"
          onClick={goRegister}
        >
          Register
        </Button>
      </div>
    </div>
  );
}