This is win-ui

Example

import React, { useState } from "react";
import { Grid, GridItem } from "@qung/win-ui";

// Define a type for the movie data
interface Movie {
  title: string;
  description: string;
  releaseYear: number;
  posterUrl: string;
}

// Dummy movie data
const movieData: Movie[] = [
  {
    title: "Inception",
    description: "A mind-bending thriller",
    releaseYear: 2010,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "The Dark Knight",
    description: "A crime thriller with a dark superhero",
    releaseYear: 2008,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "Interstellar",
    description: "A space exploration story",
    releaseYear: 2014,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "The Matrix",
    description: "A dystopian sci-fi action film",
    releaseYear: 1999,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "Titanic",
    description: "A historical romance set on the Titanic",
    releaseYear: 1997,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "The Shawshank Redemption",
    description: "A story of hope and redemption",
    releaseYear: 1994,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "Avatar",
    description: "A sci-fi epic set on a distant planet",
    releaseYear: 2009,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "The Godfather",
    description: "A mafia family drama",
    releaseYear: 1972,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "Gladiator",
    description: "A Roman soldier seeks revenge",
    releaseYear: 2000,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
  {
    title: "The Lion King",
    description: "A young lion's journey to the throne",
    releaseYear: 1994,
    posterUrl:
      "https://m.media-amazon.com/images/M/MV5BMGMzZjdiNjEtMTMwMS00MTVkLTk0NWMtOGFjODY1MWRkNmVmXkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg",
  },
];

// Pagination settings
const itemsPerPage = 6;

const App = () => {
  // Manage the current page state
  const [currentPage, setCurrentPage] = useState(1);

  // Calculate the start and end indices for the current page
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  // Get the movies to be displayed on the current page
  const currentMovies = movieData.slice(startIndex, endIndex);

  // Handle pagination navigation
  const handleNextPage = () => {
    if (currentPage < Math.ceil(movieData.length / itemsPerPage)) {
      setCurrentPage(currentPage + 1);
    }
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  return (
    <div style={{ padding: 10 }}>
      <Grid
        columns={3}
        gap="20px"
        style={{
          padding: "20px",
          minWidth: "280px",
          backgroundColor: "black",
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))",
        }}
      >
        {/* Map over the current movies to render */}
        {currentMovies.map((movie, index) => (
          <GridItem
            key={index}
            style={{
              backgroundColor: "lightgray",
              minWidth: "128px",
              padding: "13px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
            }}
          >
            <img
              src={movie.posterUrl}
              alt={movie.title}
              style={{ width: "100%", height: "auto", marginBottom: "10px" }}
            />
            <h3
              style={{ color: "#333", fontSize: "16px", marginBottom: "5px" }}
            >
              {movie.title}
            </h3>
            <p style={{ color: "#555", fontSize: "12px" }}>
              {movie.description}
            </p>
            <span style={{ color: "#999", fontSize: "12px" }}>
              {movie.releaseYear}
            </span>
          </GridItem>
        ))}
      </Grid>

      {/* Pagination Controls */}
      <div style={{ textAlign: "center", marginTop: "20px" }}>
        <button
          onClick={handlePrevPage}
          disabled={currentPage === 1}
          style={{ padding: "10px", margin: "0 5px", cursor: "pointer" }}
        >
          Previous
        </button>
        <span style={{ padding: "10px" }}>
          Page {currentPage} of {Math.ceil(movieData.length / itemsPerPage)}
        </span>
        <button
          onClick={handleNextPage}
          disabled={currentPage === Math.ceil(movieData.length / itemsPerPage)}
          style={{ padding: "10px", margin: "0 5px", cursor: "pointer" }}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default App;