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 { Toaster } from "sonner";
import { ConnectMetamaskButton } from "../components/ConnectMetamaskButton"; import { Header } from "../components/Header";
export const Route = createRootRoute({ export const Route = createRootRoute({
component: RootLayout, component: RootLayout,
@ -9,27 +9,7 @@ export const Route = createRootRoute({
function RootLayout() { function RootLayout() {
return ( return (
<> <>
<header className="bg-primary text-primary-content p-4 flex items-center"> <Header />
<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>
<main> <main>
<Outlet /> <Outlet />
<Toaster /> <Toaster />