diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-24 15:54:48 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-24 15:54:48 +0700 |
| commit | ee4297280c1305c7e03bedd4df63ccf136c28c6c (patch) | |
| tree | 62eb00777f42542a37c63687dd1536f8f56df894 /src/components/layouts/AppBar.js | |
| parent | 23b31aa10302cc990f3fb083b8189233b2e9e08d (diff) | |
Merapihkan struktur folder
Diffstat (limited to 'src/components/layouts/AppBar.js')
| -rw-r--r-- | src/components/layouts/AppBar.js | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js new file mode 100644 index 00000000..f9dddf9d --- /dev/null +++ b/src/components/layouts/AppBar.js @@ -0,0 +1,59 @@ +import { ChevronLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; +import Head from "next/head"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import Link from "../elements/Link"; + +const AppBar = ({ title }) => { + const router = useRouter(); + + const [scrollPosition, setScrollPosition] = useState(0); + const handleScrollPosition = () => { + const position = window.pageYOffset; + setScrollPosition(position); + } + + useEffect(() => { + window.addEventListener('scroll', handleScrollPosition, { passive: true }); + + return () => { + window.addEventListener('scroll', handleScrollPosition); + }; + }, []); + + const handleBackButtonClick = (event) => { + event.currentTarget.disabled = true; + router.back(); + } + + return ( + <> + <Head> + <title>{ title } - Indoteknik</title> + </Head> + <div className={"sticky-header flex justify-between !p-0 !pr-4 idt-transition " + (scrollPosition > 0 && "shadow border-b-transparent" ) }> + {/* --- Start Title */} + <div className="flex items-center"> + <button type="button" onClick={handleBackButtonClick} className="text-gray_r-12 px-4 py-5"> + <ChevronLeftIcon className="w-6 stroke-2"/> + </button> + <h1 className="text-h-md">{ title }</h1> + </div> + {/* --- End Title */} + + {/* --- Start Icons */} + <div className="flex gap-x-4 items-center"> + <Link href="/"> + <HeartIcon className="w-6 stroke-2 text-gray_r-12"/> + </Link> + <Link href="/"> + <HomeIcon className="w-6 stroke-2 text-gray_r-12"/> + </Link> + </div> + {/* --- End Icons */} + </div> + </> + ); +}; + +export default AppBar;
\ No newline at end of file |