not-found.tsx

"use client"

import { usePathname } from "next/navigation"
import { useMounted } from "nextra/hooks"

import { Footer } from "@/components/footer"
import { Navbar } from "@/components/navbar/navbar"
import { topLevelNavbarItems } from "@/components/navbar/top-level-items"

import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
import stripesMask from "@/components/404-page/image.webp"

import { Button } from "./conf/_design-system/button"

export default function NotFoundPage() {
  const pathname = usePathname()
  const mounted = useMounted()

  const repo = {
    origin: "https://github.com",
    owner: "graphql",
    name: "graphql.github.io",
  }

  const referrer = mounted && document.referrer
  const title = `Found broken \`${mounted ? pathname?.replace(/\/$/, "") : ""}\` link${referrer ? ` from \`${referrer}\`` : ""}. Please fix!`
  const labels = "bug"

  const url = `${repo.origin}/${repo.owner}/${
    repo.name
  }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`

  return (
    <>
      {/*
        No support for metadata in not-found.tsx yet
        https://github.com/vercel/next.js/pull/47328#issuecomment-1488891093
      */}
      <title>
        Not Found | Please click the button to file a broken-link issue if this
        should be a valid route.
      </title>
      <Navbar items={topLevelNavbarItems} />
      <style>{".nextra-nav-container.sticky { position: fixed }"}</style>
      <div className="relative">
        <Stripes />
        <div className="relative z-10 flex h-[500px] flex-col items-center justify-center gap-8 pt-[--nextra-navbar-height] font-sans lg:h-[600px] lg:gap-10">
          <FourOhFourIcon className="text-pri-base" />
          <h1 className="text-4xl text-neu-900">Page not found</h1>
          <div className="flex gap-4 max-sm:flex-col">
            <Button variant="primary" href={url}>
              Submit an issue about broken link
            </Button>
            <Button variant="tertiary" href="/">
              Go back home
            </Button>
          </div>
        </div>
      </div>
      <Footer />
    </>
  )
}

function Stripes() {
  return (
    <div
      aria-hidden
      className="pointer-events-none absolute inset-0"
      style={{
        maskImage: `url(${stripesMask.src})`,
        WebkitMaskImage: `url(${stripesMask.src})`,
        maskRepeat: "no-repeat",
        WebkitMaskRepeat: "no-repeat",
        maskPosition: "center 100%",
        WebkitMaskPosition: "center 100%",
        maskSize: "130%",
        WebkitMaskSize: "130%",
      }}
    >
      <StripesDecoration
        stripeWidth="8px"
        evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light)/.4)_0%,hsl(var(--color-neu-0)/.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-dark)/0.6)_0%,hsl(var(--color-pri-darker)/0.3)_100%)]"
        oddClassName="bg-[linear-gradient(180deg,hsl(var(--color-neu-0))_0%,hsl(var(--color-neu-0)/0)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-neu-0)/0.2)_0%,transparent_100%)]"
      />
    </div>
  )
}

function FourOhFourIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="204"
      height="80"
      viewBox="0 0 204 80"
      fill="currentColor"
      className={className}
    >
      <title>404</title>
      <path d="M45.2399 80V57.4806H0V33.8414H11.3411V22.5194H22.5576V11.3219H34.0234V0H57.9519V80H45.2399ZM12.5874 44.9145H45.2399V12.5661H35.2696V23.7636H23.8039V34.9611H12.5874V44.9145Z" />
      <path d="M84.3652 80V68.8025H73.0241V11.3219H84.3652V0H119.51V11.3219H130.976V68.8025H119.51V80H84.3652ZM85.6115 67.5583H118.264V12.5661H85.6115V67.5583Z" />
      <path d="M191.288 80V57.4806H146.048V33.8414H157.389V22.5194H168.606V11.3219H180.071V0H204V80H191.288ZM158.636 44.9145H191.288V12.5661H181.318V23.7636H169.852V34.9611H158.636V44.9145Z" />
    </svg>
  )
}