DotPagination

import { useState } from "react";


export default function Demo() {
  const [page, setPage] = useState<number>(0);


  const pages = [
    "This is page 1",
    "And this is page 2",
    "This is page 3",
    "This is page 4",
    "And finally, this is page 5",
  ];


  return (
    <div className="w-100% flex justify-center flex-col items-center">
      <div className="text-center">
        <HvTypography>{pages[page]}</HvTypography>
      </div>
      <br />
      <HvDotPagination
        page={page}
        pages={pages.length}
        onPageChange={(_, value) => setPage(value)}
        getItemAriaLabel={(pageNumber) => {
          switch (pageNumber) {
            case 0:
              return "first page button aria-label";
            case 4:
              return "last page button aria-label";
            default:
              return `${pageNumber + 1} page aria-label`;
          }
        }}
        role="navigation"
        aria-label="Example Dot Navigation"
      />
    </div>
  );
}

import { useState } from "react";


export default function Demo() {
  const [page, setPage] = useState<number>(0);
  const pages = [
    "This is page 1",
    "And this is page 2",
    "Now you can see page 3",
    "Look, it's page 4",
    "And finally, this is page 5",
  ];


  return (
    <div className="w-100% flex flex-col items-center justify-center">
      <HvTypography>{pages[page]}</HvTypography>
      <br />
      <HvDotPagination
        unselectedIcon={<RadioButtonUnselected iconSize="XS" />}
        selectedIcon={<CurrentStep iconSize="XS" />}
        page={page}
        pages={pages.length}
        onPageChange={(_, value) => setPage(value)}
        getItemAriaLabel={(pageNumber) => {
          switch (pageNumber) {
            case 0:
              return "first page button aria-label";
            case 4:
              return "last page button aria-label";
            default:
              return `${pageNumber + 1} page aria-label`;
          }
        }}
        role="navigation"
        aria-label="Example Dot Navigation"
      />
    </div>
  );
}