text: import React from "react";
  import PasswordItem from "./PasswordItem";
  import InfoPassword from "./InfoPassword";
  import { animated, useTransition } from "react-spring";
  import { AiOutlineSearch } from "react-icons/ai";
  import { Link, useLocation } from "react-router-dom";
  import { useSelector } from "react-redux";
  
  const Passwords = React.memo(function Passwords() {
      const { passwords = [] } = useSelector((state) => state.db);
      const { pathname } = useLocation();
      const [info, setInfo] = React.useState(null);
      const [search, setSearch] = React.useState("");
  
      const array = React.useMemo(() => {
          if (search.length) {
              return passwords.filter(
                  (item) =>
                      item.title.toLowerCase().indexOf(search.toLowerCase()) + 1
              );
          } else {
              return passwords;
          }
      }, [search, passwords]);
  
      const openInfo = (item) => {
          setInfo(item);
      };
      const closeInfo = (event) => {
          setInfo(null);
      };
  
      React.useEffect(() => {
          return () => {
              setInfo(null);
          };
      }, [passwords]);
  
      const transitions = useTransition(info, {
          from: {
              transform: "translateX(100%)",
              position: "absolute",
              top: 0,
              bottom: 0,
              right: 0,
              width: "100%",
          },
          enter: {
              transform: "translateX(0%)",
          },
          leave: {
              transform: "translateX(100%)",
          },
      });
  
      const onSearch = (e) => {
          setSearch(e.target.value);
      };
      return (
          <>
              <div className="body_head">
                  <p className="body_search">
                      <input
                          type="search"
                          className="input"
                          value={search}
                          onInput={onSearch}
                          placeholder="Поиск..."
                      />
                      <AiOutlineSearch />
                  </p>
                  <p className="body_title">Пароли</p>
  
                  <p className="body_head_btns">
                      <Link
                          to={`${pathname}/new`}
                          className="btn btn-primary"
                          draggable="false"
                      >
                          Добавить
                      </Link>
                  </p>
              </div>
  
              <div className="passwords scroll">
                  {array.map((item) => (
                      <PasswordItem
                          key={item.id}
                          openInfo={openInfo}
                          card={item}
                      />
                  ))}
              </div>
  
              {transitions(
                  (styles, item) =>
                      item && (
                          <animated.div className="info scroll" style={styles}>
                              <InfoPassword item={item} closeInfo={closeInfo} />
                          </animated.div>
                      )
              )}
          </>
      );
  });
  
  export default Passwords;
  