drfeely.com/website/app/(pages)/articles/(content)/layout.tsx

"use client";
import GenericButton from "@/components/GenericButton";
import { ArrowLongLeftIcon, ArrowSmallUpIcon } from "@heroicons/react/24/solid";
import Link from "next/link";
import { ReactNode, useEffect, useState } from "react";

interface Props {
  children: ReactNode;
}

const ArticlesLayout = ({ children }: Props) => {
  const [isTopOfPage, setIsTopOfPage] = useState(true);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY <= 500) {
        setIsTopOfPage(true);
      } else {
        setIsTopOfPage(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="mx-auto mt-20 w-11/12 md:w-2/5">
      <Link href="/articles" className="my-5 block font-bold">
        <ArrowLongLeftIcon className="inline w-[24px] "></ArrowLongLeftIcon>{" "}
        View all Articles
      </Link>
      {children}
      <Link href="/articles" className="my-5 block font-bold">
        <ArrowLongLeftIcon className="inline w-[24px] "></ArrowLongLeftIcon>{" "}
        View all Articles
      </Link>
      {/* For some reason if I use a <Link> here it doesn't scroll all the way to the top of the page. */}
      {isTopOfPage ? (
        <></>
      ) : (
        <button
          onClick={() => window.scrollTo(0, 0)}
          className="fixed bottom-0 right-0 m-3 mb-5 mr-5 flex flex-col items-center rounded-lg bg-primary-100 p-3 align-middle drop-shadow-md transition-all duration-300 hover:drop-shadow-xl md:right-1/4 md:mr-[-4rem]"
        >
          <ArrowSmallUpIcon className="w-[24px]"></ArrowSmallUpIcon>
          <div className="text-sm italic">To Top</div>
        </button>
      )}
    </div>
  );
};

export default ArticlesLayout;