feat: move componentsto ui directory

src/components/ui/AlertSnackbar.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import { useGlobalInfoStore } from "../../context/globalInfo";
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref,
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+export interface AlertSnackbarProps {
+  severity: 'error' | 'warning' | 'info' | 'success',
+  message: string,
+  isOpen: boolean,
+};
+
+export const AlertSnackbar = ({ severity, message, isOpen }: AlertSnackbarProps) => {
+  const [open, setOpen] = React.useState(isOpen);
+
+  const { closeNotify } = useGlobalInfoStore();
+
+  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    closeNotify();
+    setOpen(false);
+  };
+
+  return (
+    <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={5000} onClose={handleClose}>
+      <Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+}

src/components/ui/Box.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+interface BoxProps {
+  width: number | string,
+  height: number | string,
+  background: string,
+  radius: string,
+  children?: JSX.Element,
+};
+
+export const SimpleBox = ({ width, height, background, radius, children }: BoxProps) => {
+  return (
+    <Box
+      sx={{
+        width: width,
+        height: height,
+        backgroundColor: background,
+        borderRadius: radius,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

src/components/ui/ConfirmationBox.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
+
+interface ConfirmationBoxProps {
+  selector: string;
+  onYes: () => void;
+  onNo: () => void;
+}
+
+export const ConfirmationBox = ({ selector, onYes, onNo }: ConfirmationBoxProps) => {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography variant="h6" component="h2" gutterBottom>
+        Confirmation
+      </Typography>
+      <Typography variant="body1" gutterBottom>
+        Do you want to interact with the element: {selector}?
+      </Typography>
+      <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center', gap: 2 }}>
+        <Button variant="contained" color="primary" onClick={onYes}>
+          Yes
+        </Button>
+        <Button variant="contained" color="secondary" onClick={onNo}>
+          No
+        </Button>
+      </Box>
+    </Box>
+  );
+};

src/components/ui/GenericModal.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+import { Modal, IconButton, Box } from '@mui/material';
+import { Clear } from "@mui/icons-material";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children?: JSX.Element;
+  modalStyle?: React.CSSProperties;
+  canBeClosed?: boolean;
+}
+
+export const GenericModal: FC<ModalProps> = (
+  { isOpen, onClose, children, modalStyle, canBeClosed = true }) => {
+
+  return (
+    <Modal open={isOpen} onClose={canBeClosed ? onClose : () => { }} >
+      <Box sx={modalStyle ? { ...modalStyle, boxShadow: 24, position: 'absolute', borderRadius: 5 } : defaultModalStyle}>
+        {canBeClosed ?
+          <IconButton onClick={onClose} sx={{ float: "right" }}>
+            <Clear sx={{ fontSize: 20 }} />
+          </IconButton>
+          : null
+        }
+        {children}
+      </Box>
+    </Modal>
+  );
+};
+
+const defaultModalStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 1000,
+  bgcolor: 'background.paper',
+  boxShadow: 24,
+  p: 4,
+  height: '50%',
+  display: 'block',
+  overflow: 'scroll',
+  padding: '5px 25px 10px 25px',
+  zIndex: 3147483647,
+  borderRadius: 4, // Added borderRadius for rounded corners
+};