action editor

src/widgets/action-editor/index.ts

@@ -0,0 +1 @@
+export { default as ActionEditor } from "./ui/ActionEditor";

src/widgets/action-editor/ui/ActionEditor.tsx

@@ -0,0 +1,133 @@
+import { useState } from "react";
+import type { CommentAction } from "@/entities/action/schema";
+
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import { Button, TextField } from "@mui/material";
+
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import ImageIcon from "@mui/icons-material/Image";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import VideocamIcon from "@mui/icons-material/Videocam";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      className="mt-3"
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+interface ActionEditorProps {
+  actionIndex?: number;
+  initialAction?: CommentAction;
+  onSave?: (actionIndex: number, action: CommentAction) => Promise<void> | void;
+}
+
+export default function ActionEditor({
+  actionIndex = 0,
+  initialAction,
+  onSave,
+}: ActionEditorProps) {
+  const [value, setValue] = useState(0);
+
+  const [action, setAction] = useState<CommentAction>(
+    initialAction ?? {
+      actionType: "comment",
+      text: "",
+      fileUrls: [],
+    },
+  );
+
+  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <>
+      <div className="min-h-[500px] w-[80%] rounded-sm bg-white shadow-md">
+        <Box sx={{ width: "100%" }}>
+          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+            <Tabs
+              value={value}
+              onChange={handleChange}
+              aria-label="Редактировать пост"
+            >
+              <Tab label="Текст" icon={<TextFieldsIcon />} {...a11yProps(0)} />
+              <Tab label="Изображение" icon={<ImageIcon />} {...a11yProps(1)} />
+              <Tab
+                label="Голосовое"
+                icon={<RecordVoiceOverIcon />}
+                {...a11yProps(2)}
+              />
+              <Tab label="Видео" icon={<VideocamIcon />} {...a11yProps(2)} />
+            </Tabs>
+          </Box>
+
+          <TabPanel value={value} index={0}>
+            <TextField
+              fullWidth
+              multiline
+              minRows={10}
+              maxRows={10}
+              value={action.text}
+              onChange={(event) =>
+                setAction((currentAction) => ({
+                  ...currentAction,
+                  text: event.target.value,
+                }))
+              }
+            />
+          </TabPanel>
+
+          <TabPanel value={value} index={1}>
+            In progress
+          </TabPanel>
+
+          <TabPanel value={value} index={2}>
+            In progress
+          </TabPanel>
+
+          <TabPanel value={value} index={3}>
+            In progress
+          </TabPanel>
+        </Box>
+      </div>
+
+      <div className="mt-4">
+        <Button
+          variant="contained"
+          type="submit"
+          onClick={() => {
+            if (onSave) onSave(actionIndex, action);
+          }}
+        >
+          Сохранить
+        </Button>
+      </div>
+    </>
+  );
+}