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

54 lines
1.7 KiB
TypeScript
Raw Normal View History

2023-08-29 04:50:52 +00:00
"use client";
import { ArrowLongLeftIcon, ArrowSmallUpIcon } from "@heroicons/react/24/solid";
2023-08-26 02:18:11 +00:00
import Link from "next/link";
2023-08-29 04:50:52 +00:00
import { ReactNode, useEffect, useState } from "react";
2023-08-26 02:18:11 +00:00
interface Props {
children: ReactNode;
}
const ArticlesLayout = ({ children }: Props) => {
2023-08-29 04:50:52 +00:00
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);
}, []);
2023-08-26 02:18:11 +00:00
return (
<div className="min-h-screen w-full">
<div className="mx-auto w-11/12 py-24 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>
{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>
2023-08-26 02:18:11 +00:00
</div>
);
};
export default ArticlesLayout;