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";
import { useToast } from "@/app/components/ui/use-toast";

export default function Home(): ReactElement {
  const { toast } = useToast();
  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;
    }

    // Limit the paste size to 400,000 characters
    if (value.length > 400_000) {
      toast({
        title: "Paste",
        description: "Pastes can't be longer than 400,000 characters",
      });
      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>

      <div className="absolute top-0 right-0 mx-3 mt-2">
        <ActionMenu>
          <Button onClick={() => createPaste()}>Save</Button>
        </ActionMenu>
      </div>
    </div>
  );
}