38 lines
956 B
TypeScript
38 lines
956 B
TypeScript
|
import React from 'react';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
|
||
|
|
|
||
|
|
interface ConfirmationBoxProps {
|
||
|
|
selector: string;
|
||
|
|
onClose: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ConfirmationBox = ({ selector, onClose }: ConfirmationBoxProps) => {
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<Typography>
|
||
|
|
Do you want to proceed?
|
||
|
|
</Typography>
|
||
|
|
<Box style={{marginTop: '4px'}}>
|
||
|
|
Selector: {selector}
|
||
|
|
<pre>{selector}</pre>
|
||
|
|
</Box>
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const ConfirmationBoxContainer = styled.div`
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background: white;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 20px;
|
||
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||
|
|
z-index: 2147483648; /* Ensure it's above the highlighter */
|
||
|
|
text-align: center;
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default ConfirmationBox;
|