Skip to content

Commit

Permalink
HeaderMenuLinks. Inline navLinks
Browse files Browse the repository at this point in the history
  • Loading branch information
carletex committed Oct 12, 2023
1 parent 74bcfb8 commit 502540e
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 62 deletions.
35 changes: 5 additions & 30 deletions packages/nextjs/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,11 @@
import React, { useCallback, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { Bars3Icon } from "@heroicons/react/24/outline";
import { headerMenuLinks } from "~~/components/headerMenuLinks";
import { HeaderMenuLinks } from "~~/components/HeaderMenuLinks";
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { useOutsideClick } from "~~/hooks/scaffold-eth";

const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
const router = useRouter();
const isActive = router.pathname === href;

return (
<Link
href={href}
passHref
className={`${
isActive ? "bg-secondary shadow-md" : ""
} hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
>
{children}
</Link>
);
};

const navLinks = headerMenuLinks.map(({ label, href, icon }) => (
<li key={href}>
<NavLink href={href}>
<span>{icon}</span>
<span>{label}</span>
</NavLink>
</li>
));

/**
* Site header
*/
Expand Down Expand Up @@ -65,7 +38,7 @@ export const Header = () => {
setIsDrawerOpen(false);
}}
>
{navLinks}
<HeaderMenuLinks />
</ul>
)}
</div>
Expand All @@ -78,7 +51,9 @@ export const Header = () => {
<span className="text-xs">Ethereum dev stack</span>
</div>
</Link>
<ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">{navLinks}</ul>
<ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
<HeaderMenuLinks />
</ul>
</div>
<div className="navbar-end flex-grow mr-4">
<RainbowKitCustomConnectButton />
Expand Down
58 changes: 58 additions & 0 deletions packages/nextjs/components/HeaderMenuLinks.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { BugAntIcon, MagnifyingGlassIcon, SparklesIcon } from "@heroicons/react/24/outline";

interface HeaderMenuLink {
label: string;
href: string;
icon?: React.ReactNode;
}

export const menuLinks: HeaderMenuLink[] = [
{
label: "Home",
href: "/",
},
{
label: "Debug Contracts",
href: "/debug",
icon: <BugAntIcon className="h-4 w-4" />,
},
{
label: "Example UI",
href: "/example-ui",
icon: <SparklesIcon className="h-4 w-4" />,
},
{
label: "Block Explorer",
href: "/blockexplorer",
icon: <MagnifyingGlassIcon className="h-4 w-4" />,
},
];

export const HeaderMenuLinks = () => {
const router = useRouter();

return (
<>
{menuLinks.map(({ label, href, icon }) => {
const isActive = router.pathname === href;
return (
<li key={href}>
<Link
href={href}
passHref
className={`${
isActive ? "bg-secondary shadow-md" : ""
} hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
>
{icon}
<span>{label}</span>
</Link>
</li>
);
})}
</>
);
};
30 changes: 0 additions & 30 deletions packages/nextjs/components/headerMenuLinks.tsx

This file was deleted.

155 changes: 153 additions & 2 deletions packages/nextjs/generated/deployedContracts.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,154 @@
const deployedContracts = null;
const contracts = {
31337: [
{
chainId: "31337",
name: "localhost",
contracts: {
YourContract: {
address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
abi: [
{
inputs: [
{
internalType: "address",
name: "_owner",
type: "address",
},
],
stateMutability: "nonpayable",
type: "constructor",
},
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: "address",
name: "greetingSetter",
type: "address",
},
{
indexed: false,
internalType: "string",
name: "newGreeting",
type: "string",
},
{
indexed: false,
internalType: "bool",
name: "premium",
type: "bool",
},
{
indexed: false,
internalType: "uint256",
name: "value",
type: "uint256",
},
],
name: "GreetingChange",
type: "event",
},
{
inputs: [],
name: "greeting",
outputs: [
{
internalType: "string",
name: "",
type: "string",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [],
name: "owner",
outputs: [
{
internalType: "address",
name: "",
type: "address",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [],
name: "premium",
outputs: [
{
internalType: "bool",
name: "",
type: "bool",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "string",
name: "_newGreeting",
type: "string",
},
],
name: "setGreeting",
outputs: [],
stateMutability: "payable",
type: "function",
},
{
inputs: [],
name: "totalCounter",
outputs: [
{
internalType: "uint256",
name: "",
type: "uint256",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "",
type: "address",
},
],
name: "userGreetingCounter",
outputs: [
{
internalType: "uint256",
name: "",
type: "uint256",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [],
name: "withdraw",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
stateMutability: "payable",
type: "receive",
},
],
},
},
},
],
} as const;

export default deployedContracts;
export default contracts;

0 comments on commit 502540e

Please sign in to comment.