feat: use react-router for links and redirects

This commit is contained in:
trafficlunar 2026-04-17 18:25:33 +01:00
parent 87b885a2f8
commit 12203901e9
35 changed files with 1222 additions and 1111 deletions

View file

@ -1,18 +1,19 @@
import { Icon } from "@iconify/react";
import SearchBar from "./search-bar";
import HeaderProfile from "./header-profile";
import { Link } from "react-router";
export default function Header() {
return (
<header className="sticky top-0 z-50 w-full p-4 grid grid-cols-3 gap-2 gap-x-4 items-center bg-amber-50 border-b-4 border-amber-500 shadow-md max-lg:grid-cols-2 max-md:grid-cols-1">
<a
href={"/"}
<Link
to={"/"}
aria-label="Go to Home Page"
className="font-black text-3xl text-orange-400 flex items-center gap-2 max-md:justify-center max-md:col-span-2"
>
<img src="/logo.svg" width={56} height={45} alt="logo" />
TomodachiShare
</a>
</Link>
<div className="flex justify-center max-lg:justify-end max-md:justify-center">
<SearchBar />
@ -20,19 +21,19 @@ export default function Header() {
<ul className="flex justify-end gap-3 items-center h-11 *:h-full max-lg:col-span-2 max-md:justify-center">
<li title="Random Mii">
<a
href={`${import.meta.env.VITE_API_URL}/random`}
<Link
to={`${import.meta.env.VITE_API_URL}/random`}
aria-label="Go to Random Link"
className="pill button p-0! h-full aspect-square"
data-tooltip="Go to a Random Mii"
>
<Icon icon="mdi:dice-3" fontSize={28} />
</a>
</Link>
</li>
<li>
<a href={"/submit"} className="pill button h-full">
<Link to={"/submit"} className="pill button h-full">
Submit
</a>
</Link>
</li>
<HeaderProfile />
</ul>