init: Init React Application

src/shared/ui/BackButton/index.tsx

@@ -0,0 +1,13 @@
+import { MoveLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+export const BackButton = () => {
+  const navigate = useNavigate();
+
+  return (
+    <button className="flex items-center gap-2" onClick={() => navigate(-1)}>
+      <MoveLeft />
+      Назад
+    </button>
+  );
+};

src/shared/ui/Input/index.tsx

@@ -0,0 +1,3 @@
+export const Input = () => {
+  return <input type="text" />;
+};

src/shared/ui/Modal/index.tsx

@@ -0,0 +1,45 @@
+import { Modal as MuiModal, Typography, Box } from "@mui/material";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: string;
+}
+
+const style = {
+  position: "absolute" as const,
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  boxShadow: 24,
+  p: 4,
+  borderRadius: 2,
+};
+
+export const Modal = ({ open, onClose, children, title }: ModalProps) => {
+  return (
+    <MuiModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        {title && (
+          <Typography
+            id="modal-modal-title"
+            variant="h6"
+            component="h2"
+            gutterBottom
+          >
+            {title}
+          </Typography>
+        )}
+        <Box id="modal-modal-description">{children}</Box>
+      </Box>
+    </MuiModal>
+  );
+};

src/shared/ui/TabPanel/index.tsx

@@ -0,0 +1,23 @@
+import { Box } from "@mui/material";
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`sight-tabpanel-${index}`}
+      aria-labelledby={`sight-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+};

src/shared/ui/index.ts

@@ -0,0 +1,3 @@
+export * from "./TabPanel";
+export * from "./BackButton";
+export * from "./Modal";