53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
"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;
|