mirror of
https://github.com/alexhopeoconnor/frigate.git
synced 2026-10-04 03:18:11 +10:00
Josh Hawkins
1757f4cb04
* use prettier-plugin-tailwindcss to keep class names organized * use prettierrc file to ensure formatting on save works with vscode * classname reorder with prettier-plugin-tailwindcss
45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { LuX } from "react-icons/lu";
|
|
import { Button } from "../ui/button";
|
|
import { FaCompactDisc } from "react-icons/fa";
|
|
|
|
type SaveExportOverlayProps = {
|
|
className: string;
|
|
show: boolean;
|
|
onSave: () => void;
|
|
onCancel: () => void;
|
|
};
|
|
export default function SaveExportOverlay({
|
|
className,
|
|
show,
|
|
onSave,
|
|
onCancel,
|
|
}: SaveExportOverlayProps) {
|
|
return (
|
|
<div className={className}>
|
|
<div
|
|
className={`pointer-events-auto flex items-center justify-center gap-2 rounded-lg px-2 ${
|
|
show ? "duration-500 animate-in slide-in-from-top" : "invisible"
|
|
} mx-auto mt-5 text-center`}
|
|
>
|
|
<Button
|
|
className="flex items-center gap-1"
|
|
variant="select"
|
|
size="sm"
|
|
onClick={onSave}
|
|
>
|
|
<FaCompactDisc />
|
|
Save Export
|
|
</Button>
|
|
<Button
|
|
className="flex items-center gap-1 text-primary"
|
|
size="sm"
|
|
onClick={onCancel}
|
|
>
|
|
<LuX />
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|