Skip to content

Commit

Permalink
Modified header and footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@luloxi
luloxi committed Sep 25, 2024
1 parent ba0c364 commit 0c25f9f
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 199 deletions.
216 changes: 36 additions & 180 deletions packages/nextjs/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,21 @@
// import React from "react";
// import Link from "next/link";
import React, { useCallback, useRef, useState } from "react";
// import Image from "next/image";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { faHome, faPlus } from "@fortawesome/free-solid-svg-icons";
import { faBell, faEnvelope, faHome, faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import { hardhat } from "viem/chains";
// import Image from "next/image";
import { useAccount } from "wagmi";
// import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { HeartIcon } from "@heroicons/react/24/outline";
// import { SwitchTheme } from "~~/components/SwitchTheme";
// import { PlusIcon } from "@heroicons/react/24/solid";
// import { Bars3Icon } from "@heroicons/react/24/outline";
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { useOutsideClick, useScaffoldReadContract } from "~~/hooks/scaffold-eth";

// import { Faucet } from "~~/components/scaffold-eth";
// import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";

// import { useGlobalState } from "~~/services/store/store";

/**
* Site footer
*/
export const Footer = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);

// const pathname = usePathname(); // Add this line to track the active route

const { address: connectedAddress, isConnected } = useAccount();
// const { writeContractAsync: usdcWriteAsync } = useScaffoldWriteContract("MockUSDC");

const { data: profileInfo } = useScaffoldReadContract({
contractName: "ProfileInfo",
functionName: "profiles",
args: [connectedAddress],
watch: true,
});

// const { data: usdcBalance } = useScaffoldReadContract({
// contractName: "MockUSDC",
// functionName: "balanceOf",
// args: [connectedAddress],
// watch: true,
// });

// const handleMintUSDC = async () => {
// try {
// await usdcWriteAsync({
// functionName: "mint",
// args: [connectedAddress, BigInt(100e6)], // Mint 1 USDC
// });

// notification.success("USDC Minted Successfully");
// } catch (error) {
// console.error("Error during minting:", error);

// // Log the error and notify the user
// notification.error("Minting failed, please try again.");
// }
// };

const defaultProfilePicture = "https://ipfs.io/ipfs/QmVCvzEQHFKzAYSsou8jEJtWdFj31n2XgPpbLjbZqui4YY";

const profilePicture = profileInfo && profileInfo[2] ? profileInfo[2] : defaultProfilePicture;

// const burgerMenuRef = useRef<HTMLDivElement>(null);
// useOutsideClick(
// burgerMenuRef,
// useCallback(() => setIsDrawerOpen(false), []),
// );

const menuRef = useRef<HTMLDivElement>(null);

const pathname = usePathname();

useOutsideClick(
menuRef,
useCallback(() => setIsMenuOpen(false), []),
);

// const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
// const { targetNetwork } = useTargetNetwork();
// const isLocalNetwork = targetNetwork.id === hardhat.id;

return (
<>
<div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
<div>
{/* <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none"> */}
<div className="fixed flex justify-end items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
{/* <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
{nativeCurrencyPrice > 0 && (
<div>
<div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
<CurrencyDollarIcon className="h-4 w-4" />
<span>{nativeCurrencyPrice.toFixed(2)}</span>
</div>
</div>
)}
{isLocalNetwork && (
<>
<Faucet />
<Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
<MagnifyingGlassIcon className="h-4 w-4" />
<span>Block Explorer</span>
</Link>
</>
)}
</div> */}
{/* <SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} /> */}
</div>
<div className="fixed flex justify-end items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none"></div>
</div>
<div className="w-full">
<ul className="menu menu-horizontal w-full">
Expand Down Expand Up @@ -140,86 +43,39 @@ export const Footer = () => {
</ul>
</div>
</div>
<div className="sticky lg:hidden bottom-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
<div className="navbar-start ml-4 ">
<Link href="/" passHref>
<FontAwesomeIcon
icon={faHome}
className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`}
/>
</Link>
</div>

<div className="navbar-center flex-1 flex justify-center items-center">
<Link href="/create" passHref>
<button
className={`btn btn-ghost hidden lg:flex flex-row items-center justify-center text-2xl ${
pathname === "/create" ? "text-blue-600" : ""
}`}
>
<div className="flex flex-row items-center justify-center gap-2">
<FontAwesomeIcon icon={faPlus} className="h-6 w-6" />
<span>Create</span>
</div>
</button>
<button
className={`font-bold lg:hidden flex items-center justify-center text-3xl ${
pathname === "/create" ? "text-blue-600" : ""
}`}
>
<FontAwesomeIcon icon={faPlus} className="h-6 w-6" />
</button>
</Link>
</div>

<div className="navbar-end mr-4 relative" ref={menuRef}>
{isConnected ? (
// <>

// <div className="hidden lg:flex items-center gap-2 pr-4 cursor-pointer" onClick={handleMintUSDC}>
// {/* Wrap Image in a div and set explicit width/height */}
// <div className="w-7 h-7 relative">
// <Image
// src="/usdc-logo.png" // Ensure you use the correct path for Next.js
// alt="USDC Logo"
// width={28} // 7 * 4px = 28px
// height={28} // 7 * 4px = 28px
// style={{ objectFit: "contain" }} // Ensures the image behaves like 'object-contain'
// />
// </div>

// <span className="text-md text-cyan-600 font-bold">{usdcBalance ? Number(usdcBalance) / 1e6 : 0}</span>
// </div>
<>
<div
className="w-10 h-10 bg-white text-black rounded-full flex items-center justify-center cursor-pointer"
onClick={() => setIsMenuOpen(!isMenuOpen)}
style={{
backgroundImage: `url(${profilePicture})`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
></div>
</>
) : (
<RainbowKitCustomConnectButton />
)}
{isMenuOpen && isConnected && (
<div className="absolute flex flex-col items-center justify-center right-0 bottom-16 mt-2 w-48 bg-base-300 shadow-lg rounded-lg">
<div className="pt-2">
<RainbowKitCustomConnectButton />
</div>

<div className="pt-2 mb-2 flex flex-row items-center justify-center gap-2">
<Link href="/myProfile" passHref>
<span className="btn btn-primary">My Profile</span>
</Link>
<FaucetButton />
</div>
</div>
)}
</div>
</div>
<footer className="sticky lg:hidden bottom-0 w-full bg-base-100 px-4 py-2 flex justify-between items-center">
<Link href="/" passHref>
<FontAwesomeIcon
icon={faHome}
className={`h-6 w-6 ${pathname === "/" ? "text-blue-600" : "hover:text-blue-600"}`}
/>
</Link>

<Link href="/search" passHref>
<FontAwesomeIcon
icon={faSearch}
className={`h-6 w-6 text-gray-500 ${pathname === "/profile" ? "text-blue-600" : "hover:text-blue-600"}`}
/>
</Link>
<Link href="/create" passHref>
<FontAwesomeIcon
icon={faPlus}
className={`h-6 w-6 ${pathname === "/create" ? "text-blue-600" : "hover:text-blue-600"}`}
/>
</Link>
<Link href="/notifications" passHref>
<FontAwesomeIcon
icon={faBell}
className={`h-6 w-6 text-gray-500 ${pathname === "/search" ? "text-blue-600" : "hover:text-blue-600"}`}
/>
</Link>
<Link href="/messages" passHref>
<FontAwesomeIcon
icon={faEnvelope}
className={`h-6 w-6 text-gray-500 ${pathname === "/settings" ? "text-blue-600" : "hover:text-blue-600"}`}
/>
</Link>
</footer>
</>
);
};
25 changes: 6 additions & 19 deletions packages/nextjs/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,9 @@ export const Header = () => {
return (
<div className="flex lg:sticky top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 px-0 sm:px-2">
<div className="navbar-start ">
<div className="flex lg:hidden ml-4 items-center justify-center">
<SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
</div>
<Link href="/" passHref>
<button
className={`btn btn-primary bg-transparent hover:bg-base-200 border-none hidden lg:flex flex-row items-center justify-center text-2xl ${
Expand Down Expand Up @@ -160,27 +163,11 @@ export const Header = () => {
</div>

<div className="navbar-end mr-4 relative" ref={menuRef}>
<div className="hidden lg:flex">
<div className="">
{isConnected ? (
// <>

// <div className="hidden lg:flex items-center gap-2 pr-4 cursor-pointer" onClick={handleMintUSDC}>
// {/* Wrap Image in a div and set explicit width/height */}
// <div className="w-7 h-7 relative">
// <Image
// src="/usdc-logo.png" // Ensure you use the correct path for Next.js
// alt="USDC Logo"
// width={28} // 7 * 4px = 28px
// height={28} // 7 * 4px = 28px
// style={{ objectFit: "contain" }} // Ensures the image behaves like 'object-contain'
// />
// </div>

// <span className="text-md text-cyan-600 font-bold">{usdcBalance ? Number(usdcBalance) / 1e6 : 0}</span>
// </div>
<>
<div className="flex items-center justify-center">
<SwitchTheme className={`mr-4 pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
<div className="hidden lg:flex items-center justify-center">
{/* <SwitchTheme className={`mr-4 pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} /> */}
</div>

<div
Expand Down

0 comments on commit 0c25f9f

Please sign in to comment.