Function Main

example/src/pages/Main/index.jsx:17–92

()

};

function Main() {
  const [isBboxDrawEnabled, setIsBboxDrawEnabled] = useState(false);
  const { collections } = useCollections();
  const {
    setBbox,
    collections: selectedCollections,
    setCollections,
    dateRangeFrom,
    setDateRangeFrom,
    dateRangeTo,
    setDateRangeTo,
    submit,
    results,
    isLoading,
    error,
    nextPage,
    previousPage,
  } = useStacSearch();

  const handleDrawComplete = useCallback(
    (feature) => {
      setIsBboxDrawEnabled(false);

      const { coordinates } = feature.geometry;
      const bbox = [...coordinates[0][0], ...coordinates[0][2]];
      setBbox(bbox);
    },
    [setBbox]
  );

  const [selectedItem, setSelectedItem] = useState(null);

  const onSelect = useCallback(
    (item) => () => {
      setSelectedItem(item);
    },
    []
  );
  const onClose = useCallback(() => {
    setSelectedItem(null);
  }, []);

  return (
    <div className="grid grid-cols-4 gap-4 m-4">
      <QueryBuilder
        setIsBboxDrawEnabled={setIsBboxDrawEnabled}
        handleSubmit={submit}
        collections={collections || {}}
        selectedCollections={selectedCollections}
        setCollections={setCollections}
        dateRangeFrom={dateRangeFrom}
        setDateRangeFrom={setDateRangeFrom}
        dateRangeTo={dateRangeTo}
        setDateRangeTo={setDateRangeTo}
      />
      {selectedItem ? (
        <ItemDetails item={selectedItem} onClose={onClose} />
      ) : (