Use separate buttons for export control

This commit is contained in:
Nicolas Mowen 2024-03-27 16:29:35 -06:00
parent 7075ea53aa
commit 43510ebdd5

View File

@ -1,5 +1,4 @@
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { LuX } from "react-icons/lu";
type SaveExportOverlayProps = { type SaveExportOverlayProps = {
className: string; className: string;
@ -16,20 +15,15 @@ export default function SaveExportOverlay({
return ( return (
<div className={className}> <div className={className}>
<div <div
className={`flex justify-center px-2 gap-2 items-center pointer-events-auto bg-selected rounded-lg *:text-white *:hover:bg-transparent ${ className={`flex justify-center px-2 gap-2 items-center pointer-events-auto rounded-lg *:text-white ${
show ? "animate-in slide-in-from-top duration-500" : "invisible" show ? "animate-in slide-in-from-top duration-500" : "invisible"
} text-center mt-5 mx-auto`} } text-center mt-5 mx-auto`}
> >
<Button className="p-0" variant="ghost" size="sm" onClick={onSave}> <Button variant="select" size="sm" onClick={onSave}>
Save Export Save Export
</Button> </Button>
<Button <Button size="sm" variant="secondary" onClick={onCancel}>
className="cursor-pointer" Cancel
size="xs"
variant="ghost"
onClick={onCancel}
>
<LuX />
</Button> </Button>
</div> </div>
</div> </div>