import React from 'react'; import { Button, Box, Dialog, DialogActions, DialogContent, DialogTitle, } from '@material-ui/core'; import Accordion from '@material-ui/core/Accordion'; import AccordionSummary from '@material-ui/core/AccordionSummary'; import AccordionDetails from '@material-ui/core/AccordionDetails'; import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { makeStyles } from "@material-ui/core/styles" const useStyles = makeStyles((theme) => ({ cardGrid: { paddingTop: theme.spacing(8), paddingBottom: theme.spacing(8), }, card: { height: '100%', display: 'flex', flexDirection: 'column', }, cardMedia: { paddingTop: '56.25%', // 16:9 }, cardContent: { flexGrow: 1, }, copyButton: { justifyContent: "flex-end", }, accordion: { backgroundColor: "#F6F7F9" } })); export default function UrlsDialog(props) { const classes = useStyles(); return ( <Dialog open={props.state.hitsopen} onClose={props.handleClose} aria-labelledby="form-dialog-title"> <DialogTitle id="form-dialog-title">Link Activity</DialogTitle> <DialogContent> {props.hitActivity.map((activity) => ( <Accordion className={classes.accordion}> <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header" > <Typography className={classes.heading}>{activity.data.timestamp}</Typography> </AccordionSummary> <AccordionDetails> <Box bgcolor="text.primary" color="background.paper" p={2} width={1}> <div> <p><b>IPV4:</b>{activity.data.ipv4}</p> <p><b>User-Agent:</b>{activity.data.useragent}</p> </div> </Box> </AccordionDetails> </Accordion> ))} </DialogContent> <DialogActions> <Button onClick={props.handleClose} color="primary"> Cancel </Button> </DialogActions> </Dialog> ); }