text: import React, { useState, Suspense } from "react";
  import {
    Loader,
    Box,
    Heading,
    Icon,
    Dialog,
    Text,
    Button,
    Input,
  } from "@airtable/blocks/ui";
  
  import UniversalSearchResults from "./UniversalSearchResults.js";
  
  const UniversalSearch = () => {
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [value, setValue] = useState("");
    const [searchString, setSearchString] = useState("");
  
    return (
      <React.Fragment>
        <Icon
          name="search"
          size={26}
          fillColor="white"
          onClick={() => setIsDialogOpen(true)}
        />
  
        {isDialogOpen && (
          <Dialog
            onClose={() => setIsDialogOpen(false)}
            width="80%"
            height="90vh"
          >
            <Box
              padding={2}
              display="flex"
              alignItems="flex-start"
              alignContent="center"
              justifyContent="center"
              flexDirection="row"
              flexWrap="wrap"
            >
              <Box
                padding={2}
                marginBottom={2}
                height="120px"
                minWidth="80%"
                backgroundColor="white"
                borderRadius="large"
                overflow="hidden"
                flex="1 1 auto"
                boxShadow="1px 1px 15px 0 rgba(0,0,0,0.08);"
              >
                <Dialog.CloseButton />
                <Heading>Universal Search</Heading>
                <Text variant="paragraph">
                  Searches all cells, in all records, in all tables
                </Text>
                <Box
                  display="flex"
                  alignItems="flex-start"
                  alignContent="center"
                  justifyContent="center"
                  flexDirection="row"
                  flexWrap="wrap"
                >
                  <Box flex="1 1 auto">
                    <Input
                      value={value}
                      onChange={(e) => setValue(e.target.value)}
                      placeholder="Enter property address..."
                      width="100%"
                    />
                  </Box>
                  <Box flex="1 1 auto" marginLeft={2}>
                    <Button
                      onClick={() => setSearchString(value)}
                      variant="primary"
                      icon="search"
                    >
                      Search
                    </Button>
                  </Box>
                </Box>
              </Box>
              <Box
                padding={2}
                height="69vh"
                minWidth="80%"
                backgroundColor="white"
                borderRadius="large"
                overflow="scroll"
                flex="1 1 auto"
                boxShadow="1px 1px 15px 0 rgba(0,0,0,0.08);"
              >
                <Suspense
                  fallback={
                    <Box
                      justifyContent="center"
                      alignItems="center"
                      display="flex"
                    >
                      <Loader scale={0.3} />
                    </Box>
                  }
                >
                  <UniversalSearchResults searchString={searchString} />
                </Suspense>
              </Box>
            </Box>
          </Dialog>
        )}
      </React.Fragment>
    );
  };
  
  export default UniversalSearch;
  