osmannyildiz
/
OsiPad
1
1
Fork 0
Code Pull Requests Activity

move header into new component

This commit is contained in:
osmannyildiz 2024-05-12 13:00:22 +03:00
parent 8efe0f3718
commit 29ca4239ee
2 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/Header.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Link } from "@tanstack/react-router";
import { ConnectMetamaskButton } from "./ConnectMetamaskButton";
export function Header() {
return (
<header className="bg-primary text-primary-content p-4 flex items-center">
<div className="flex-grow">
<span className="text-4xl font-bold">OsiPad&trade;</span>
<hr className="my-1" />
<div className="flex gap-3">
<Link to="/" className="[&.active]:font-bold">
Home
</Link>
<Link to="/about" className="[&.active]:font-bold">
About
</Link>
<Link to="/message-box" className="[&.active]:font-bold">
Message Box
</Link>
<Link to="/pad-token" className="[&.active]:font-bold">
PAD Token
</Link>
</div>
</div>
<ConnectMetamaskButton />
</header>
);
}

26
frontend/src/routes/__root.tsx
View File

@ -1,6 +1,6 @@
import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
import { createRootRoute, Outlet } from "@tanstack/react-router";
import { Toaster } from "sonner";
import { ConnectMetamaskButton } from "../components/ConnectMetamaskButton";
import { Header } from "../components/Header";
export const Route = createRootRoute({
component: RootLayout,
@ -9,27 +9,7 @@ export const Route = createRootRoute({
function RootLayout() {
return (
<>
<header className="bg-primary text-primary-content p-4 flex items-center">
<div className="flex-grow">
<span className="text-4xl font-bold">OsiPad&trade;</span>
<hr className="my-1" />
<div className="flex gap-3">
<Link to="/" className="[&.active]:font-bold">
Home
</Link>
<Link to="/about" className="[&.active]:font-bold">
About
</Link>
<Link to="/message-box" className="[&.active]:font-bold">
Message Box
</Link>
<Link to="/pad-token" className="[&.active]:font-bold">
PAD Token
</Link>
</div>
</div>
<ConnectMetamaskButton />
</header>
<Header />
<main>
<Outlet />
<Toaster />