83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
|
import {
|
||
|
|
Menubar,
|
||
|
|
MenubarContent,
|
||
|
|
MenubarItem,
|
||
|
|
MenubarMenu,
|
||
|
|
MenubarTrigger,
|
||
|
|
} 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.moe/assets/keisatsu-chan.png"} width={48}/>
|
||
|
|
<h3 className="scroll-m-20 text-lg font-semibold tracking-tight">
|
||
|
|
Replay Viewer
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<MenubarMenu>
|
||
|
|
<MenubarTrigger>File</MenubarTrigger>
|
||
|
|
<MenubarContent>
|
||
|
|
<MenubarItem
|
||
|
|
onClick={() => {
|
||
|
|
state.setState({ aboutDialog: true });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
About
|
||
|
|
</MenubarItem>
|
||
|
|
</MenubarContent>
|
||
|
|
</MenubarMenu>
|
||
|
|
|
||
|
|
{OsuRenderer.beatmap && (
|
||
|
|
<>
|
||
|
|
{" "}
|
||
|
|
<MenubarMenu>
|
||
|
|
<MenubarTrigger>Analyzer</MenubarTrigger>
|
||
|
|
<MenubarContent>
|
||
|
|
<MenubarItem
|
||
|
|
onClick={() => {
|
||
|
|
state.setState({ dataAnalysisDialog: true });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
gRDA
|
||
|
|
</MenubarItem>
|
||
|
|
</MenubarContent>
|
||
|
|
</MenubarMenu>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</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>
|
||
|
|
);
|
||
|
|
}
|