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

"use client";
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="w-11/12 md:w-2/5 mx-auto mt-20">
      <Link href="/articles" className="font-bold block my-5">
        <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
        Back to Articles
      </Link>
      {children}
      <Link href="/articles" className="font-bold block my-5">
        <ArrowLongLeftIcon className="w-[24px] inline "></ArrowLongLeftIcon>{" "}
        Back to Articles
      </Link>
      {isTopOfPage ? (
        <></>
      ) : (
        <a
          href="#"
          className=" fixed bottom-0 md:right-1/4 md:mr-[-4rem] right-0 mr-5 mb-5 p-3 bg-primary-100 rounded-lg drop-shadow-2xl flex flex-col items-center hover:drop-shadow-xl transition-all duration-300"
        >
          <ArrowSmallUpIcon className="w-[24px]"></ArrowSmallUpIcon>
          <div className="text-sm italic">To Top</div>
        </a>
      )}
    </div>
  );
};

export default ArticlesLayout;