Function QueryBuilder

example/src/pages/Main/QueryBuilder.jsx:10–82

({
  setIsBboxDrawEnabled,
  collections,
  selectedCollections,
  setCollections,
  handleSubmit,
  dateRangeFrom,
  setDateRangeFrom,
  dateRangeTo,
  setDateRangeTo,
})

import Section from '../../layout/Section';

function QueryBuilder({
  setIsBboxDrawEnabled,
  collections,
  selectedCollections,
  setCollections,
  handleSubmit,
  dateRangeFrom,
  setDateRangeFrom,
  dateRangeTo,
  setDateRangeTo,
}) {
  const handleEnableBbox = useCallback(() => setIsBboxDrawEnabled(true), [setIsBboxDrawEnabled]);

  const handleRangeFromChange = useCallback(
    (e) => setDateRangeFrom(e.target.value),
    [setDateRangeFrom]
  );
  const handleRangeToChange = useCallback((e) => setDateRangeTo(e.target.value), [setDateRangeTo]);

  const collectionOptions = useMemo(
    () =>
      collections.collections
        ? collections.collections.map(({ id, title }) => ({ value: id, label: title }))
        : [],
    [collections]
  );

  return (
    <Panel className="py-4 grid grid-rows-[min-content_auto_min-content_min-content_min-content] gap-4 h-[calc(100vh_-_90px)]">
      <H2 className="px-4">Query Builder</H2>

      <Section className="px-4 overflow-x-hidden overflow-y-auto">
        <Checkbox
          label="Select Collections"
          name="collections"
          options={collectionOptions}
          values={selectedCollections || []}
          onChange={setCollections}
        />
      </Section>

      <Section className="px-4">
        <fieldset>
          <Legend>Select Date Range</Legend>
          <label htmlFor="date_from">From</label>
          <input
            type="date"
            name="date_from"
            id="date_from"
            onChange={handleRangeFromChange}
            value={dateRangeFrom}
          />
          <label htmlFor="date_to">To</label>
          <input
            type="date"
            name="date_to"
            id="date_to"
            onChange={handleRangeToChange}