68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import {Menubar,} from "@/interface/components/ui/menubar";
|
|
import {OsuRenderer} from "@/osu/OsuRenderer";
|
|
import {state} from "@/utils";
|
|
|
|
export function Navbar() {
|
|
const {beatmap, mods} = state();
|
|
return (
|
|
<Menubar className="rounded-none border-x-0 border-t-0 flex justify-between px-4">
|
|
<div className="flex gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<img src={"https://nise.stedos.dev/assets/keisatsu-chan.png"} width={48}/>
|
|
<h3 className="scroll-m-20 text-lg font-semibold tracking-tight">
|
|
/replay/
|
|
</h3>
|
|
</div>
|
|
|
|
<button onClick={() => {
|
|
state.setState({aboutDialog: true});
|
|
}}
|
|
className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
|
|
About
|
|
</button>
|
|
|
|
{OsuRenderer.beatmap && (
|
|
<>
|
|
{OsuRenderer.replay2 == null && (
|
|
<a href={"https://nise.stedos.dev/s/" + OsuRenderer.replay.info.id} target="_blank"
|
|
className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
|
|
View on nise.stedos.dev
|
|
</a>)}
|
|
{OsuRenderer.replay2 && (
|
|
<a href={"https://nise.stedos.dev/p/" + OsuRenderer.replay.info.id + "/" + OsuRenderer.replay2.info.id} target="_blank"
|
|
className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
|
|
View on nise.stedos.dev
|
|
</a>)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{beatmap && (
|
|
<div className="flex gap-4 items-center">
|
|
{mods?.map((mod) => {
|
|
return (
|
|
<img
|
|
src={`/mod_${mod.acronym.toLowerCase()}.png`}
|
|
className="h-5"
|
|
></img>
|
|
);
|
|
})}
|
|
<div className="flex flex-col items-end">
|
|
<p className="text-xs opacity-75">Currently Viewing</p>
|
|
|
|
<p className="text-xs font-bold">
|
|
{beatmap?.metadata.artist} - {beatmap?.metadata.title}
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={`https://assets.ppy.sh/beatmaps/${beatmap?.metadata.beatmapSetId}/covers/cover.jpg?${beatmap?.metadata.beatmapId}`}
|
|
alt=""
|
|
width={90}
|
|
className="rounded-sm"
|
|
/>
|
|
</div>
|
|
)}
|
|
</Menubar>
|
|
);
|
|
}
|