Frontend/src/app/(pages)/[id]/page.tsx

import { ReactElement } from "react";
import hljs from "highlight.js";
import { ActionMenu } from "@/app/components/action-menu";

// Highlight.js theme
import "highlight.js/styles/github-dark-dimmed.css";
import { cn } from "@/app/common/utils";
import { jetbrainsMono } from "@/app/common/font/font";
import { Metadata } from "next";
import moment from "moment";

type PasteProps = {
  params: {
    id: string;
  };
};

type Paste = {
  /**
   * The paste content.
   */
  content?: string;

  /**
   * The date the paste was created.
   */
  created?: number;

  /**
   * Whether an error occurred.
   */
  error?: boolean;
};

export async function generateMetadata({
  params: { id },
}: PasteProps): Promise<Metadata> {
  const { content, created, error } = await getData(id);

  if (content == undefined || error) {
    return {
      description: "Not found",
    };
  }

  return {
    description: `Created: ${moment(created)}\n\nClick to view the paste.`,
  };
}

async function getData(id: string): Promise<Paste> {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_ENDPOINT}/${id}`);
  const json = await response.json();

  if (json.code && json.message) {
    return {
      error: true,
    };
  }

  return json as Paste;
}

export default async function Paste({
  params: { id },
}: PasteProps): Promise<ReactElement> {
  const { content, error } = await getData(id);

  if (content == undefined || error) {
    return <div>Not found</div>;
  }

  return (
    <div className="relative">
      <ActionMenu />

      <pre>
        <code
          className={cn("hljs !bg-transparent", jetbrainsMono.className)}
          dangerouslySetInnerHTML={{
            __html: hljs.highlightAuto(content).value,
          }}
        />
      </pre>
    </div>
  );
}