import React from 'react'; import { Body } from '@leafygreen-ui/typography'; import { DEFAULT_CURRENT_PAGE, DEFAULT_ITEMS_PER_PAGE_OPTIONS, } from '../constants'; import { getLgIds } from '../getLgIds'; import { getSectionStyles } from '../Pagination.styles'; import { getCurrentRangeString, getRangeMaxString } from '../utils'; import { SummaryProps } from './Summary.types'; /** * Summary is a component that displays the current range of items. */ function Summary({ 'data-lgid': dataLgId, itemsPerPage = DEFAULT_ITEMS_PER_PAGE_OPTIONS[0] as T, currentPage = DEFAULT_CURRENT_PAGE, numTotalItems, className, }: SummaryProps) { const lgIds = getLgIds(dataLgId); return (

{getCurrentRangeString(itemsPerPage, currentPage, numTotalItems)} of{' '} {getRangeMaxString(numTotalItems)}

); } Summary.displayName = 'Summary'; export default Summary;