54 lines
1.8 KiB
TypeScript
54 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="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>{" "}
|
|
View all Articles
|
|
</Link>
|
|
{children}
|
|
<Link href="/articles" className="font-bold block my-5">
|
|
<ArrowLongLeftIcon className="w-[24px] inline "></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="p-3 m-3 rounded-lg align-middle drop-shadow-md hover:drop-shadow-xl transition-all duration-300 fixed bottom-0 md:right-1/4 md:mr-[-4rem] right-0 mr-5 mb-5 bg-primary-100 flex items-center flex-col"
|
|
>
|
|
<ArrowSmallUpIcon className="w-[24px]"></ArrowSmallUpIcon>
|
|
<div className="text-sm italic">To Top</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ArticlesLayout;
|