41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { IconButton, Tooltip } from "@mui/material";
|
|
import { Contrast } from "lucide-react";
|
|
|
|
interface PreviewBackgroundToggleProps {
|
|
dark: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export const PreviewBackgroundToggle = ({
|
|
dark,
|
|
onToggle,
|
|
}: PreviewBackgroundToggleProps) => (
|
|
<Tooltip title={dark ? "Сделать фон белым" : "Сделать фон чёрным"}>
|
|
<IconButton
|
|
size="small"
|
|
aria-label={dark ? "Сделать фон белым" : "Сделать фон чёрным"}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onToggle();
|
|
}}
|
|
sx={{
|
|
position: "absolute",
|
|
top: 8,
|
|
left: 8,
|
|
zIndex: 2,
|
|
color: dark ? "#fff" : "#000",
|
|
backgroundColor: dark
|
|
? "rgba(255, 255, 255, 0.16)"
|
|
: "rgba(255, 255, 255, 0.8)",
|
|
"&:hover": {
|
|
backgroundColor: dark
|
|
? "rgba(255, 255, 255, 0.28)"
|
|
: "rgba(255, 255, 255, 1)",
|
|
},
|
|
}}
|
|
>
|
|
<Contrast size={18} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|