JSFiddle - React, Tailwind, and code Playground

by dj19910501

HTML

<div id="container">
</div>

CSS

.images {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.image {
  display: flex;
  align-items: center;
  width: 100%;
  height: 300px;
  border: solid 1px black;
  justify-content: center;
  font-size: 60px;
}
.buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.currentImage {
  width: 20px;
  text-align: center;
}

React

const App = () => {
	const size = 10;
	const [currentImage, setCurrentImage] = React.useState(0);
	const images = Array(size).fill(0).map((v, i) => i + 1);
	return (
    <div className="images">
      <div className="image">{images[currentImage]}</div>
      <div className="buttons">
        <button 
          onClick={() => setCurrentImage(0)} 
          disabled={currentImage < 1}>First</button>
        <button 
          onClick={() => setCurrentImage(i => i - 1)} 
          disabled={currentImage < 1}>Previous</button>
        <div className="currentImage">{currentImage + 1}</div>
        <button 
          onClick={() => setCurrentImage(i => i + 1)}  
          disabled={currentImage === size - 1}>Next</button>
        <button 
          onClick={() => setCurrentImage(size - 1)}
          disabled={currentImage === size - 1}>Last</button> 
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));