Function SupplierResultLimit

SupplierResultLimit(): Element

SupplierResultLimit component that provides a text input for setting the result limit per supplier. It allows users to specify how many results to display per supplier.

Returns Element

Component

Example

<SupplierResultLimit />

Source

export default function SupplierResultLimit() {
  const appContext = useAppContext();

  /**
   * Handles changes to the result limit input.
   * Updates the user settings with the new result limit value.
   *
   * @param event - The change event
   * @source
   */
  const handleResultLimitChange = (event: ChangeEvent<HTMLInputElement>) => {
    const {
      target: { value },
    } = event;
    appContext.setUserSettings({
      ...appContext.userSettings,
      supplierResultLimit: Number(value),
    });
  };

  return (
    <StyledFormControlSelector>
      <TextField
        label="Result Limit (per supplier)"
        style={{ lineHeight: "1em" }}
        id="result-limit"
        size="small"
        value={appContext.userSettings.supplierResultLimit ?? 15}
        onChange={handleResultLimitChange}
      />
    </StyledFormControlSelector>
  );
}