52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
"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;
|