diff options
| author | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-22 15:29:18 +0700 |
|---|---|---|
| committer | Rafi Zadanly <rafizadanly@gmail.com> | 2022-12-22 15:29:18 +0700 |
| commit | 31d6352ab8855754ef18c01763d3c1b5a68de857 (patch) | |
| tree | e9b7e67a994574b5b1ccc7c8ef805a899f561d3d /src/components | |
| parent | 7ca4c68e3c509004a84d05ebd6d66019c7e92b72 (diff) | |
Appbar component and auth hook (useAuth)
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AppBar.js | 36 | ||||
| -rw-r--r-- | src/components/Header.js | 31 |
2 files changed, 49 insertions, 18 deletions
diff --git a/src/components/AppBar.js b/src/components/AppBar.js new file mode 100644 index 00000000..f22d630f --- /dev/null +++ b/src/components/AppBar.js @@ -0,0 +1,36 @@ +import { HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; +import { ChevronLeftIcon } from "@heroicons/react/24/solid"; +import Head from "next/head"; +import { useRouter } from "next/router"; +import Link from "./Link"; + +const AppBar = ({ title }) => { + const router = useRouter(); + + return ( + <> + <Head> + <title>{ title } - Indoteknik</title> + </Head> + <div className="flex justify-between p-4 border-b border-gray_r-6"> + {/* --- Start Title */} + <button type="button" onClick={() => router.back()} className="flex gap-x-2 text-gray_r-12"> + <ChevronLeftIcon className="w-6 stroke-2"/> + <h1>{ title }</h1> + </button> + {/* --- End Title */} + + {/* --- Start Icons */} + <div className="flex gap-x-3"> + <HeartIcon className="w-6 stroke-2"/> + <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 diff --git a/src/components/Header.js b/src/components/Header.js index a294c140..d41847ef 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -11,7 +11,7 @@ import { } from "@heroicons/react/24/outline"; // Helpers -import { getAuth } from "../helpers/auth"; +import { getAuth, useAuth } from "../helpers/auth"; // Components import Link from "./Link"; // Images @@ -24,11 +24,7 @@ export default function Header({ title }) { const [suggestions, setSuggestions] = useState([]); const searchQueryRef = useRef(); const [isMenuActive, setIsMenuActive] = useState(false); - const [auth, setAuth] = useState(); - - useEffect(() => { - if (!auth) setAuth(getAuth()); - }, [auth]); + const [auth, setAuth] = useAuth(); useEffect(() => { if (q) { @@ -76,24 +72,23 @@ export default function Header({ title }) { <div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}> <div className="flex gap-x-2 items-center border-b border-gray_r-6 p-4"> - {auth ? ( - <h1>Hi, {auth.name}</h1> - ) : ( + { auth && ( + <Link href="/my/menu" className="w-full flex text-gray_r-12"> + <h1>Hi, {auth.name}</h1> + <div className="ml-auto"> + <ChevronRightIcon className="w-5" /> + </div> + </Link> + ) } + + { !auth && ( <> <Link href="/login" onClick={closeMenu} className="w-full py-2 btn-light text-gray_r-12">Masuk</Link> <Link href="/register" onClick={closeMenu} className="w-full py-2 btn-yellow text-gray_r-12">Daftar</Link> </> - )} + ) } </div> <div className="flex flex-col"> - {auth && ( - <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/my/profile" onClick={closeMenu}> - <span>Profil Saya</span> - <div className="ml-auto"> - <ChevronRightIcon className="text-gray_r-12 w-5" /> - </div> - </Link> - )} <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Semua Brand</span> <div className="ml-auto"> |