Frontend/src/app/(pages)/page.tsx

"use client";

import { ReactElement, useState } from "react";
import { ActionMenu } from "@/app/components/action-menu";
import { Button } from "@/app/components/ui/button";

export default function Home(): ReactElement {
  const [value, setValue] = useState("");

  /**
   * Uploads the paste to the server.
   */
  async function createPaste() {
    // Ignore empty pastes, we don't want to save them
    if (!value || value.length == 0) {
      return;
    }

    // Upload the paste to the server
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_ENDPOINT}/upload`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: value,
      },
    );

    // Redirect to the new paste
    const data = await response.json();
    window.location.href = `/${data.id}`;
  }

  return (
    <div className="p-3 h-screen w-screen relative">
      <div className="flex gap-2 h-full w-full text-sm">
        <p className="hidden md:block">&gt;</p>
        <textarea
          onInput={(event) => {
            setValue((event.target as HTMLTextAreaElement).value);
          }}
          className="w-full h-full bg-background outline-none resize-none"
        />
      </div>

      <ActionMenu>
        <Button onClick={() => createPaste()}>Save</Button>
      </ActionMenu>
    </div>
  );
}