53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { useContext } from "react";
|
|
import { Link } from "react-router";
|
|
|
|
import { DialogProvider } from "@/context/Dialog";
|
|
import { ThemeContext } from "@/context/Theme";
|
|
|
|
import { Menubar as UIMenubar } from "@/components/ui/menubar";
|
|
|
|
import FileMenu from "./FileMenu";
|
|
import EditMenu from "./EditMenu";
|
|
import SelectMenu from "./SelectMenu";
|
|
import ViewMenu from "./ViewMenu";
|
|
|
|
import ThemeIcon from "@/components/ThemeIcon";
|
|
|
|
import BlockmaticIcon from "@/assets/blockmatic-icon-colored.svg?react";
|
|
import BlockmaticText from "@/assets/blockmatic-text-colored.svg?react";
|
|
import GithubIcon from "@/assets/github.svg?react";
|
|
import TrafficConeIcon from "@/assets/traffic_cone.svg?react";
|
|
|
|
function Menubar() {
|
|
const { isDark } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<DialogProvider>
|
|
<UIMenubar className="rounded-none border-t-0 border-x-0 col-span-3">
|
|
<div className="w-full flex items-center space-x-1 overflow-x-auto">
|
|
<Link to={{ pathname: "/" }} className="px-4 w-40 flex gap-2 items-center">
|
|
<BlockmaticIcon className="w-8" />
|
|
<BlockmaticText className="h-4" />
|
|
</Link>
|
|
|
|
<FileMenu />
|
|
<EditMenu />
|
|
<SelectMenu />
|
|
<ViewMenu />
|
|
|
|
<div className="ml-auto! pl-4 grid grid-cols-3 items-center gap-1 min-w-20">
|
|
<ThemeIcon inApp />
|
|
<a href="https://github.com/trafficlunar/blockmatic" className="w-5">
|
|
<GithubIcon fill={isDark ? "white" : "black"} />
|
|
</a>
|
|
<a href="https://trafficlunar.net" className="w-5">
|
|
<TrafficConeIcon fill={isDark ? "white" : "black"} className="hover:fill-orange-400 transition-colors" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</UIMenubar>
|
|
</DialogProvider>
|
|
);
|
|
}
|
|
|
|
export default Menubar;
|