app/[id]/page.tsx

import { redirect } from "next/navigation";
import Image from "next/image";

import { getRoast } from "@/app/actions/roast";
import { Quote } from "@/components/quote";
import Logo from "@/assets/logo.svg";
import Link from "next/link";
import { Metadata, ResolvingMetadata } from "next";

async function get(id: string) {
  const roast = await getRoast({ id });
  return roast;
}

export async function generateMetadata(
  { params }: { params: { id: string } },
  parent: ResolvingMetadata
): Promise<Metadata> {
  return {
    title: "Hugger Lover",
    description: "A Hugger has been loved! 😍 Check it out",
    metadataBase: new URL("https://enzostvs-hugger-lover.hf.space"),
    openGraph: {
      title: "Hugger Lover",
      description: "A Hugger has been loved! 😍 Check it out",
      type: "website",
      images: "https://enzostvs-hugger-lover.hf.space/api/og/" + params.id,
    },
    twitter: {
      title: "Hugger Lover",
      description: "A Hugger has been loved! 😍 Check it out",
      card: "summary_large_image",
      images: "https://enzostvs-hugger-lover.hf.space/api/og/" + params.id,
    },
  };
}

export default async function Roast({
  params: { id },
}: {
  params: { id: string };
}) {
  const quote = await get(id);

  if (!quote?.data) {
    redirect("/");
  }
  return (
    <div>
      <header className="flex items-start max-lg:gap-1 lg:items-center justify-between max-lg:flex-col mb-5">
        <Image
          src={Logo}
          alt="logo hugging face"
          width={100}
          height={100}
          className="object-contain w-36 lg:w-44"
        />
        <div>
          <p className="text-sm text-zinc-500">
            Roast your favorite Hugging Face user! 👹
          </p>
        </div>
      </header>
      <Quote data={quote.data?.text}>
        <Link
          href="/"
          className="bg-black rounded-full inline-block px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 mt-5"
        >
          Roast another user! 🧨
        </Link>
      </Quote>
    </div>
  );
}