Skip to content

Commit

Permalink
rewards header
Browse files Browse the repository at this point in the history
  • Loading branch information
danielisaacgeslin committed Sep 16, 2024
1 parent 65f528d commit e876ba9
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 249 deletions.
19 changes: 7 additions & 12 deletions apps/rewards-dashboard/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,13 @@ function App() {
<>
<AppProvider>
<Background>
<div
className={`
flex flex-col grow h-full
justify-between
overflow-scroll scrollbar-hide
`}
>
<Header />
{
// TODO: routing for different layouts
}
<DashboardLayout />
<div className="flex flex-col grow h-full justify-between overflow-scroll scrollbar-hide py-6 px-4 flex-1">
<div className="flex flex-1 flex-col md:flex-row">
<Header />
<div className="flex flex-1 items-center justify-center">
<DashboardLayout />
</div>
</div>
<Footer />
</div>
</Background>
Expand Down
45 changes: 14 additions & 31 deletions apps/rewards-dashboard/src/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,21 @@ import { WormholeLogo } from "../quarks/LogoVectors";

export const Footer = () => {
return (
<>
<div
className="
flex flex-col mt-16 mb-4
gap-8
"
>
<div
className="
flex flex-row items-center justify-center
"
>
<div className="text-white text-xs text-opacity-60 pr-4">
Powered By
</div>
<WormholeLogo />
</div>
<div
className="
flex flex-row gap-4
flex-1
justify-between
"
>
<div className="text-white text-sm text-opacity-90">
v{import.meta.env.VITE_APP_VERSION || "0.0.0"}
</div>
<div className="text-white text-sm text-opacity-90">
Built by xLabs
</div>
<footer className="flex flex-row mt-16 gap-8 justify-between items-center">
<div className="text-white text-sm text-opacity-90">
v{import.meta.env.VITE_APP_VERSION || "0.0.0"}
</div>

<div className="flex flex-row items-center justify-center flex-1">
<div className="text-white text-xs text-opacity-60 pr-4">
Powered By
</div>
<WormholeLogo />
</div>

<div className=" flex flex-row gap-4 justify-between">
<div className="text-white text-sm text-opacity-90">Built by xLabs</div>
</div>
</>
</footer>
);
};
94 changes: 21 additions & 73 deletions apps/rewards-dashboard/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,86 +1,34 @@
import { useState } from "react";
import { CiMenuBurger } from "react-icons/ci";

import { WalletManager } from "../quarks/WalletManager";
import { useState } from "react";
import { MobileNavItem, NavItem } from "../quarks/NavItem";
import { NavItem } from "../quarks/NavItem";
import { PortalLogoWithText } from "../quarks/LogoVectors";

export const Header = () => {
const [showMenu, setShowMenu] = useState(false);

return (
<>
<div className="flex flex-col">
<header className="flex flex-col gap-1">
<div className="flex flex-row gap-1 justify-between">
<a className="flex mb-12" href={navBar[0].href}>
<PortalLogoWithText />
</a>
<div
className="
flex flex-row
gap-1
justify-between
items-center
"
className="md:hidden flex flex-row px-4 hover:cursor-pointer"
onClick={() => setShowMenu((p) => !p)}
>
<a
className="
flex flex-row gap-2
items-center
"
href={navBar[0].href}
>
<PortalLogoWithText />
</a>
<div
className="
collapse md:visible
flex flex-row
justify-end
items-center px-2
w-2/3
grow
"
>
<div
className="
flex flex-row justify-between
gap-8
items-center
py-8
"
>
{navBar.map((x, idx) => {
return (
<>
<NavItem key={idx} item={x} />
</>
);
})}
<WalletManager />
</div>
</div>
<div
className="
md:hidden
flex flex-row items-center px-4
hover:cursor-pointer
"
onClick={() => {
setShowMenu(!showMenu);
}}
>
<CiMenuBurger className="w-5 h-5 stroke-white stroke-1" />
</div>
<CiMenuBurger className="w-5 h-5 stroke-white stroke-1" />
</div>
</div>
<div className={`${showMenu ? "" : "hidden"} md:flex`}>
<div className="flex flex-col gap-6 pb-6">
{navBar.map((x, idx) => (
<NavItem key={idx} item={x} />
))}
<WalletManager />
</div>
{showMenu && (
<div className={` md:hidden pb-8 duration-200`}>
<div className="flex flex-col text-start">
{navBar.map((x, idx) => {
return (
<>
<MobileNavItem key={idx} item={x} />
</>
);
})}
</div>
</div>
)}
</div>
</>
</header>
);
};
4 changes: 1 addition & 3 deletions apps/rewards-dashboard/src/layouts/DashboardLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -311,9 +311,7 @@ export const DashboardLayout = () => {
const { isConnected } = useAccount();
return (
<div
className="
flex flex-col
"
className="flex flex-col flex-1"
>
{isConnected ? <ConnectedDashboard /> : <DisconnectedDashboard />}
</div>
Expand Down
Loading

0 comments on commit e876ba9

Please sign in to comment.