Code for post "My blog now has Stories, and I'm not sure why"

my-blog-now-has-stories,-and-i'm-not-sure-why-script-3.js

const useStyles = makeStyles((theme) => ({
  modal: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    backdropFilter: 'blur(5px)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 9999,
  },
  modalContent: {
    backgroundColor: 'transparent',
    padding: theme.spacing(2),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-end',
  },
  closeButton: {
    marginBottom: theme.spacing(1),
  },
  arrowButton: {
    position: 'absolute',
    top: '50%',
    transform: 'translateY(-50%)',
    fontSize: '2rem',
    cursor: 'pointer',
  },
  arrowLeft: {
    left: theme.spacing(1),
  },
  arrowRight: {
    right: theme.spacing(1),
  },
}));

const StoryModal = ({
  stories,
  onClose,
  onPrevious,
  onNext,
  showPrevious,
  showNext,
  currentStoriesIndex,
  onStoryEnd,
  onStoryStart,
  onAllStoriesEnd,
}) => {
  const classes = useStyles();
  const intl = useIntl();
  const isMobileDevice = useMemo(isMobile, []);

  const handleKeyDown = useCallback(
    (event) => {
      if (event.key === 'ArrowRight' && showNext) {
        onNext();
      } else if (event.key === 'ArrowLeft' && showPrevious) {
        onPrevious();
      }
    },
    [onNext, onPrevious, showNext, showPrevious]
  );

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [handleKeyDown]);

  return (
    <div className={classes.modal} onClick={onClose}>
      <div className={classes.modalContent} onClick={(e) => e.stopPropagation()}>
        <Button className={classes.closeButton} onClick={onClose}>
          {intl.formatMessage({ id: 'close' })}
        </Button>
        {!isMobileDevice && showPrevious && (
          <ArrowBackIcon
            className={classNames(classes.arrowButton, classes.arrowLeft)}
            onClick={onPrevious}
          />
        )}
        {!isMobileDevice && showNext && (
          <ArrowForwardIcon
            className={classNames(classes.arrowButton, classes.arrowRight)}
            onClick={onNext}
          />
        )}
        <Stories
          stories={stories}
          key={currentStoriesIndex}
          currentIndex={0}
          onStoryEnd={onStoryEnd}
          onStoryStart={onStoryStart}
          onAllStoriesEnd={onAllStoriesEnd}
        />
      </div>
    </div>
  );
};