Commenting the behavior of Product Component.

components/GoToTopButton/index.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import {AiOutlineArrowUp} from 'react-icons/ai';
+export function GoToTopButton() {
+	const [ isVisible, setIsVisible ] = useState(false);
+	//create a go to top button
+
+	const goToTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth'
+		});
+	};
+
+	const toggleVisibility = () => {
+
+        window.pageYOffset > 300?
+        setIsVisible(true):
+        setIsVisible(false)
+
+	};
+
+	useEffect(() => {
+		window.addEventListener('scroll', toggleVisibility);
+		return () => {
+			window.removeEventListener('scroll', toggleVisibility);
+		};
+	}, []);
+
+	//show the button only when the user scrolls down
+	if (isVisible) {
+		return (
+			<div className="fixed bottom-4 right-3">
+				<button className='rounded-full bg-gray-300 hover:scale-125 drop-shadow-sm transition-all p-2 text-gray-500' onClick={goToTop}>
+                    <AiOutlineArrowUp className='text-1xl'/>
+                </button>
+			</div>
+		);
+	}
+    return null;
+}

components/Layout/index.tsx

@@ -1,17 +1,21 @@
 import React ,{ReactNode}from 'react'
 import Navbar from '../Navbar'
-
+import {GoToTopButton} from '../GoToTopButton';
 interface LayoutProps  {
     children: ReactNode
 }
 
 export default function Layout({children}:LayoutProps) {
+
+
+
     return (
         <>
             <Navbar/>
             <main className="flex w-full min-h-screen px-5 md:px-20 font-montserrat py-20 pb-24 bg-gray-200">
                 {children}   
             </main>
+           <GoToTopButton/>
         </>
     )
 }

components/Product/index.tsx

@@ -3,6 +3,13 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { productProp } from '../../interfaces';
 
+/*
+	This component is used to display the product common details
+	like name and price
+	if the current url is not the product page
+	When the user clicks on the product name it should redirects to the product page with the product id,
+	else stays on the current page
+*/
 export function Product({ product }: productProp) {
     const router = useRouter();