trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: split menubar into multiple components

Browse source
This commit is contained in:
trafficlunar 2024-12-13 22:30:46 +00:00
parent adae559d01
commit f2b3910432
4 changed files with 84 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/menubar/FileMenu.tsx Normal file
View file

@ -0,0 +1,35 @@
import {
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar";
function FileMenu() {
return (
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>Open Schematic</MenubarItem>
<MenubarItem>Open Image</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Export to...</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>.schematic</MenubarItem>
<MenubarItem>.litematic</MenubarItem>
<MenubarItem>image</MenubarItem>
</MenubarSubContent>
</MenubarSub>
</MenubarContent>
</MenubarMenu>
);
}
export default FileMenu;

15
src/components/menubar/MoreMenu.tsx Normal file
View file

@ -0,0 +1,15 @@
import { MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
import ThemeChanger from "./ThemeChanger";
function MoreMenu() {
return (
<MenubarMenu>
<MenubarTrigger>More</MenubarTrigger>
<MenubarContent>
<ThemeChanger />
</MenubarContent>
</MenubarMenu>
);
}
export default MoreMenu;

24
src/components/menubar/ViewMenu.tsx Normal file
View file

@ -0,0 +1,24 @@
import { useContext } from "react";
import { MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
import { SettingsContext } from "@/context/SettingsContext";
function ViewMenu() {
const { settings, setSetting } = useContext(SettingsContext);
const onCheckedChange = (key: keyof Settings) => (value: boolean) => {
setSetting(key, value);
};
return (
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarCheckboxItem checked={settings.grid} onCheckedChange={onCheckedChange("grid")}>
Grid
</MenubarCheckboxItem>
</MenubarContent>
</MenubarMenu>
);
}
export default ViewMenu;

50
src/components/menubar/index.tsx
View file

@ -1,49 +1,19 @@
import {
Menubar as UIMenubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar";
import { Menubar as UIMenubar } from "@/components/ui/menubar";
import ThemeChanger from "./ThemeChanger";
import FileMenu from "./FileMenu";
import ViewMenu from "./ViewMenu";
import MoreMenu from "./MoreMenu";
function Menubar() {
return (
<UIMenubar className="rounded-none border-t-0 border-x-0 col-span-2">
<MenubarMenu>
<a href="https://github.com/trafficlunar/blockmatic" className="ml-4 mr-2">
blockmatic
</a>
<a href="https://github.com/trafficlunar/blockmatic" className="ml-4 mr-2">
blockmatic
</a>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>Open Schematic</MenubarItem>
<MenubarItem>Open Image</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Export to...</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>.schematic</MenubarItem>
<MenubarItem>.litematic</MenubarItem>
<MenubarItem>image</MenubarItem>
</MenubarSubContent>
</MenubarSub>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>More</MenubarTrigger>
<MenubarContent>
<ThemeChanger />
</MenubarContent>
</MenubarMenu>
<FileMenu />
<ViewMenu />
<MoreMenu />
</UIMenubar>
);
}