@chakra-ui/icons#CloseIcon TypeScript Examples

The following examples show how to use @chakra-ui/icons#CloseIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TokenSearch.tsx    From rari-dApp with GNU Affero General Public License v3.0 5 votes vote down vote up 
export default function TokenSearch({
  onChange,
}: {
  onChange: (value: string) => void;
}) {
  const [val, setVal] = useState("");

  // run onChange on value change
  useEffect(() => {
    onChange(val);
  }, [val, onChange]);

  const { t } = useTranslation();

  return (
    <Box>
      <InputGroup>
        <InputLeftElement
          pointerEvents="none"
          children={<SearchIcon color="#757575" />}
        />
        <Input
          variant="filled"
          value={val}
          color="#757575"
          onChange={({ target: { value } }) => setVal(value)}
          placeholder={t("Search Assets")}
          _placeholder={{ color: "gray.500", fontWeight: "bold" }}
          _focus={{ color: "#fff", background: "transparent" }}
        />
        {/* button to clear search */}
        {val === "" ? null : (
          <InputRightElement
            role="button"
            aria-label="Clear search"
            title="Clear search"
            cursor="pointer"
            onClick={() => setVal("")}
            children={<CloseIcon color="#757575" boxSize="12px" />}
          />
        )}
      </InputGroup>
    </Box>
  );
}
Example #2
Source File: Sidebar.tsx    From openchakra with MIT License 4 votes vote down vote up 
Menu = () => {
  const [searchTerm, setSearchTerm] = useState('')

  return (
    <DarkMode>
      <Box
        maxH="calc(100vh - 3rem)"
        overflowY="auto"
        overflowX="visible"
        boxShadow="xl"
        flex="0 0 14rem"
        p={5}
        m={0}
        as="menu"
        backgroundColor="#2e3748"
        width="15rem"
      >
        <InputGroup size="sm" mb={4}>
          <Input
            value={searchTerm}
            color="gray.300"
            placeholder="Search component…"
            onChange={(event: ChangeEvent<HTMLInputElement>) =>
              setSearchTerm(event.target.value)
            }
            borderColor="rgba(255, 255, 255, 0.04)"
            bg="rgba(255, 255, 255, 0.06)"
            _hover={{
              borderColor: 'rgba(255, 255, 255, 0.08)',
            }}
            zIndex={0}
          />
          <InputRightElement zIndex={1}>
            {searchTerm ? (
              <IconButton
                color="gray.300"
                aria-label="clear"
                icon={<CloseIcon path="" />}
                size="xs"
                onClick={() => setSearchTerm('')}
              />
            ) : (
              <SearchIcon path="" color="gray.300" />
            )}
          </InputRightElement>
        </InputGroup>

        {(Object.keys(menuItems) as ComponentType[])
          .filter(c => c.toLowerCase().includes(searchTerm.toLowerCase()))
          .map(name => {
            const { children, soon } = menuItems[name] as MenuItem

            if (children) {
              const elements = Object.keys(children).map(childName => (
                <DragItem
                  isChild
                  key={childName}
                  label={childName}
                  type={childName as any}
                  id={childName as any}
                  rootParentType={menuItems[name]?.rootParentType || name}
                >
                  {childName}
                </DragItem>
              ))

              return [
                <DragItem
                  isMeta
                  soon={soon}
                  key={`${name}Meta`}
                  label={name}
                  type={`${name}Meta` as any}
                  id={`${name}Meta` as any}
                  rootParentType={menuItems[name]?.rootParentType || name}
                >
                  {name}
                </DragItem>,
                ...elements,
              ]
            }

            return (
              <DragItem
                soon={soon}
                key={name}
                label={name}
                type={name as any}
                id={name as any}
                rootParentType={menuItems[name]?.rootParentType || name}
              >
                {name}
              </DragItem>
            )
          })}
      </Box>
    </DarkMode>
  )
}