feat: add carrier media customization

src/shared/ui/PreviewBackgroundToggle/index.tsx

@@ -0,0 +1,40 @@
+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>
+);

src/shared/ui/index.ts

@@ -6,3 +6,4 @@ export * from "./AnimatedCircleButton";
 export * from "./LoadingSpinner";
 export * from "./MultiSelect";
 export * from "./SearchInput";
+export * from "./PreviewBackgroundToggle";