const App = () => {
  const [selectedPost, setSelectedPost] = useState(null);

  return <div>
    <ListOfPosts>
      {posts.map(post => <Post post={post} onClick={() => setSelectedPost(post)}/>)}
    </ListOfPosts>
    <PostDetailsDialog selectedPost={selectedPost}>
  <div/>
}

// App.js
import { Box, Container, Divider, Typography } from "@mui/material";
import { Outlet, Route, Routes, useLocation } from "react-router-dom";
import About from "./About";
import ImageList from "./ImageList";
import ImageView from "./ImageView";
import ImageModal from "./ImageModal";
import Home from "./Home";

const Layout = () => (
  <Container maxWidth="md">
    <Box mb={2}>
      <Typography variant="h4">Application Demo</Typography>
      <Divider />
    </Box>
    <Outlet />
  </Container>
);

const App = () => {
  const location = useLocation();
  const { state } = location;

  return (
    <div>
      <Routes location={state?.backgroundLocation || location}>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/images" element={<ImageList />} />
          <Route path="/images/:id" element={<ImageView />} />
        </Route>
      </Routes>

      {/* Show the modal when a `backgroundLocation` is set */}
      {state?.backgroundLocation && (
        <Routes>
          <Route path="/images/:id" element={<ImageModal />} />
        </Routes>
      )}
    </div>
  );
};

export default App;

// ImageList.js
import { Box, Grid, Stack, Typography } from "@mui/material";
import React, { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import { IMAGES } from "./images";

const ImageBox = ({ image, location }) => {
  const [hovered, setHovered] = useState(false);
  const { id, src } = image;

  return (
    <Box width="100%" position="relative">
      <Link to={`/images/${id}`} state={{ backgroundLocation: location }}>
        <Box
          onMouseEnter={() => setHovered(true)}
          component="img"
          src={src}
          alt="post"
          width="100%"
          height="250px"
        />
        {hovered && (
          <Box
            onMouseLeave={() => setHovered(false)}
            position="absolute"
            top={0}
            left={0}
            bottom={0}
            right={0}
            width="100%"
            height="250px"
            bgcolor="rgba(0, 0, 0, 0.3)"
            // sx={{ opacity: 0.6 }}
          />
        )}
      </Link>
    </Box>
  );
};

const ImageList = () => {
  let location = useLocation();

  return (
    <Grid container spacing={2} alignItems="center" justifyContent="center">
      {IMAGES.map(({ title, src, id }, index) => (
        <Grid key={id} item sm={4}>
          <ImageBox image={{ title, src, id }} location={location} />
        </Grid>
      ))}
    </Grid>
  );
};

export default ImageList;

// ImageModal.js
import { useNavigate, useParams } from "react-router-dom";
import ImageView from "./ImageView";
import { getImage } from "./images";
import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";

const ImageModal = () => {
  let navigate = useNavigate();
  let { id } = useParams();
  let image = getImage(id);

  if (!image) return null;

  const handleClose = () => {
    navigate(-1);
  };

  return (
    <Dialog open onClose={handleClose}>
      <DialogContent>
        <ImageView />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Close</Button>
      </DialogActions>
    </Dialog>
  );
};

export default ImageModal;

// ImageView.js
import { ArrowBackIos } from "@mui/icons-material";
import { Button, Link, Stack, Typography, Box } from "@mui/material";
import React from "react";
import { useLocation, useParams, Link as RouterLink } from "react-router-dom";
import { getImage } from "./images";

const ImageView = () => {
  const { state } = useLocation();
  const { id } = useParams();
  const image = getImage(id);
  const { src, title } = image;

  const isInsideModal = state?.backgroundLocation;

  return (
    <div>
      {!isInsideModal && (
        <Link component={RouterLink} to="/images" underline="none">
          <Button startIcon={<ArrowBackIos />} variant="text">
            Back to Images
          </Button>
        </Link>
      )}
      <Box display="flex" justifyContent="center">
        <Stack direction="column" spacing={1}>
          <Typography variant="h5" fontWeight={600}>
            {title}
          </Typography>

          <Box component="img" sx={{ width: "400px" }} src={src} alt="dog" />
        </Stack>
      </Box>
    </div>
  );
};

export default ImageView;