diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index e0f4194..aab4e77 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -11,6 +11,7 @@ import { getTargetNetwork } from "~~/utils/scaffold-eth"; */ export const Footer = () => { const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice); + const codeLink = "https://github.com/BuidlGuidl/private-key-dices"; return (
@@ -31,15 +32,13 @@ export const Footer = () => {
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index a30c33c..9405a90 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -1,27 +1,64 @@ import React, { useCallback, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; -import Wallet from "./Wallet"; +import { useRouter } from "next/router"; import { Bars3Icon } from "@heroicons/react/24/outline"; import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth"; import { useOutsideClick } from "~~/hooks/scaffold-eth"; +interface HeaderMenuLink { + label: string; + href: string; + icon?: React.ReactNode; +} + +export const menuLinks: HeaderMenuLink[] = [ + { + label: "Home", + href: "/", + }, +]; + +export const HeaderMenuLinks = () => { + const router = useRouter(); + + return ( + <> + {menuLinks.map(({ label, href, icon }) => { + const isActive = router.pathname === href; + return ( +
  • + + {icon} + {label} + +
  • + ); + })} + + ); +}; + /** * Site header */ export const Header = () => { const [isDrawerOpen, setIsDrawerOpen] = useState(false); const burgerMenuRef = useRef(null); + useOutsideClick( burgerMenuRef, useCallback(() => setIsDrawerOpen(false), []), ); return ( -
    +
    @@ -51,11 +90,13 @@ export const Header = () => { Private Key Dice
    +
      + +
    -
    );