Pagination

import { Box, Stack, Text, SelectInput, ButtonIcon, spacing } from 'sxa-ui'
import {
  RiArrowRightSLine,
  RiArrowLeftSLine,
} from '@remixicon/react'

function Demo() {
  const totalItems = 100
  const itemsPerPageOptions = [10, 20, 50]

  return (
    <Box
      utilClassNames='sxa-bg-ui-white'
      paddingTop={spacing.xxxs}
      paddingBottom={spacing.xxxs}
      paddingLeft={spacing.s}
      paddingRight={spacing.s}
    >
      <Stack
        alignItems={Stack.alignItems.center}
        justifyContent={Stack.justifyContent.end}
        gap={spacing.xs}
      >
        <Stack gap={spacing.xxxs} alignItems={Stack.alignItems.center}>
          <Text size={Text.sizes.s}>Einträge pro Seite</Text>
          <SelectInput id='itemsPerPage' name='itemsPerPage'>
            {itemsPerPageOptions.map((item) => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </SelectInput>
        </Stack>
        <Stack alignItems={Stack.alignItems.center} gap={spacing.xxxs}>
          <Text size={Text.sizes.s}>
            {`0 - 10 Einträge von ${totalItems}`}
          </Text>
          <ButtonIcon
            variant={ButtonIcon.variants.ghost}
            tiny
            icon={RiArrowLeftSLine}
          />
          <ButtonIcon
            variant={ButtonIcon.variants.ghost}
            tiny
            icon={RiArrowRightSLine}
          />
        </Stack>
      </Stack>
    </Box>
  )
}

export default Demo