130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import { FC } from "react";
|
|
import * as Menubar from "@radix-ui/react-menubar";
|
|
import { ChevronRightIcon } from "@radix-ui/react-icons";
|
|
import { open, save } from "@tauri-apps/api/dialog";
|
|
|
|
const MenuBarTrigger: FC<{ label: string }> = ({ label }) => {
|
|
return (
|
|
<Menubar.Trigger className="py-2 dark:text-gray-300 px-3 transition-colors hover:bg-indigo-700 outline-none select-none font-medium leading-none rounded text-[13px] flex items-center justify-between gap-[2px]">
|
|
{label}
|
|
</Menubar.Trigger>
|
|
);
|
|
};
|
|
|
|
const MenuBarSubTrigger: FC<{ label: string }> = ({ label }) => {
|
|
return (
|
|
<Menubar.SubTrigger
|
|
className="group dark:text-gray-300 text-[13px] hover:bg-indigo-800 transition-colors leading-none
|
|
text-indigo11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none
|
|
data-[state=open]:bg-indigo data-[state=open]:text-white data-[highlighted]:bg-gradient-to-br
|
|
data-[highlighted]:from-indigo9 data-[highlighted]:to-indigo10 data-[highlighted]:text-indigo1
|
|
data-[highlighted]:data-[state=open]:text-indigo1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
|
|
>
|
|
{label}
|
|
<div className="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
|
|
<ChevronRightIcon />
|
|
</div>
|
|
</Menubar.SubTrigger>
|
|
);
|
|
};
|
|
|
|
const MenuBarItem: FC<{ label: string; onClick?: () => void }> = ({
|
|
label,
|
|
onClick,
|
|
}) => {
|
|
return (
|
|
<Menubar.Item
|
|
onClick={onClick}
|
|
className="group dark:text-white text-[13px] leading-none
|
|
rounded flex items-center h-[25px] px-[10px]
|
|
relative select-none outline-none hover:bg-indigo-800
|
|
data-[disabled]:pointer-events-none transition-colors"
|
|
>
|
|
{label}
|
|
</Menubar.Item>
|
|
);
|
|
};
|
|
|
|
const MenuBarSeperator = () => {
|
|
return <Menubar.Separator className="h-[1px] bg-slate-500 m-[5px]" />;
|
|
};
|
|
|
|
const MenuBar = () => {
|
|
const menuBarContentClassName =
|
|
"min-w-[220px] bg-gray-800 rounded-md p-[5px]";
|
|
|
|
const menuBarSubContentClassName =
|
|
"min-w-[220px] bg-gray-800 rounded-md p-[5px]";
|
|
|
|
return (
|
|
<Menubar.Root className="flex bg-gray-900 p-[3px] ">
|
|
<Menubar.Menu>
|
|
<MenuBarTrigger label="File" />
|
|
<Menubar.Portal>
|
|
<Menubar.Content
|
|
className={menuBarContentClassName}
|
|
align="start"
|
|
sideOffset={5}
|
|
alignOffset={-3}
|
|
>
|
|
<MenuBarItem label="New File" />
|
|
<MenuBarItem
|
|
onClick={() => open({ multiple: false })}
|
|
label="Open File"
|
|
/>
|
|
<MenuBarItem
|
|
onClick={() =>
|
|
save({
|
|
title: "Save Project",
|
|
defaultPath: "project.tbcp",
|
|
}).then((val) => {
|
|
console.log(val);
|
|
})
|
|
}
|
|
label="Save"
|
|
/>
|
|
<MenuBarItem onClick={() => save()} label="Save as" />
|
|
<MenuBarSeperator />
|
|
<Menubar.Sub>
|
|
<MenuBarSubTrigger label="Export as ..." />
|
|
|
|
<Menubar.Portal>
|
|
<Menubar.SubContent
|
|
className={menuBarSubContentClassName}
|
|
alignOffset={-5}
|
|
>
|
|
<MenuBarItem label=".mp4" />
|
|
<MenuBarItem label=".gif" />
|
|
<MenuBarItem label=".mov" />
|
|
<MenuBarItem label=".webm" />
|
|
<MenuBarItem label=".webp" />
|
|
</Menubar.SubContent>
|
|
</Menubar.Portal>
|
|
</Menubar.Sub>
|
|
</Menubar.Content>
|
|
</Menubar.Portal>
|
|
</Menubar.Menu>
|
|
|
|
<Menubar.Menu>
|
|
<MenuBarTrigger label="Edit" />
|
|
|
|
<Menubar.Portal>
|
|
<Menubar.Content
|
|
className={menuBarContentClassName}
|
|
align="start"
|
|
sideOffset={5}
|
|
alignOffset={-3}
|
|
>
|
|
<MenuBarItem label="Undo" />
|
|
<MenuBarItem label="Redo" />
|
|
<MenuBarItem label="Copy" />
|
|
<MenuBarItem label="Paste" />
|
|
</Menubar.Content>
|
|
</Menubar.Portal>
|
|
</Menubar.Menu>
|
|
</Menubar.Root>
|
|
);
|
|
};
|
|
|
|
export default MenuBar;
|