const placement = props.placement || "top"; const label = props.label || "Contracts per page"; const limits = props.limits || [10, 20, 50]; const theme = props.theme || { name: "light", bg: "#e3e8ef", color: "#4c5566", border: "#748094", hover: { bg: "#eef2f6", border: "#d8dfe7", }, }; const selectedLimit = props.selectedLimit || props.limits[0] || 10; const Select = styled.select` border: 1px solid ${theme.border}; background-color: transparent; border-radius: 6px; height: 36px; width: 76px; padding-left: 10px; padding-right: 10px; text-align: start; transition: border 0.1s ease-in-out; color: ${theme.color}; :hover { border: 1px solid ${theme.hover.border}; } `; return ( <OverlayTrigger key={placement} placement={placement} overlay={<Tooltip id={`tooltip-${placement}`}>{label}</Tooltip>} > <Select onChange={(e) => props.handleOptionsChange(e)}> {limits.map((limit, i) => ( <option key={i} value={limit} selected={selectedLimit === limit}> {limit} </option> ))} </Select> </OverlayTrigger> );