Check if button is active then get its value to pass down a button

function Input() {
  const [input, setInput] = useState("");
  function handleSearch() {
    let url = "https://google.com/search?q=${input}"
    window.open(url)
  }
  return (
    <div className="input-wrap">
      <input
        type="text"
        className="input__search"
        placeholder="Enter your search..."
        value={input}
        onChange={(e) => setInput(e.target.value)}></input>
      <button
        className="input__search--btn"
        onClick={handleSearch}>
        <i className="fa-solid fa-magnifying-glass"></i>
      </button>
    </div>
  );
}

The search button when clicked will redirect you to a google search based on the value from the input field, below is the site for advanced search, when active the link will add an additional link after "https://google.com/search?q=${input}+site%3A${activepage}.com, how do I check if one or many sites are active then pass down its name to url

P/s: code for toggling websites

function WebButton({ icon, name }) {
    const [active, setActive] = useState(false);
    function handleToggle() {
        setActive(!active);
    }
        return (
            <button
            className={active ? "websites-btn active" : "websites-btn"}
            onClick={handleToggle}>
            <i className={icon}></i>
            <div className="websites-name">{name}</div> 
    </button>
  );
}

Answer

You can keep a root level state to gather active links to a state. And pass it to the Input component.

1. Update your Input component to accept array called “ and update the handleSearch to use OR operation in google search.

function Input({ activeLinks }) {
  const [input, setInput] = useState("");
  function handleSearch() {
    if (activeLinks.length > 0) {
      let compundSearchURL = `https://google.com/search?q=${input}`;
      activeLinks.forEach((link, i) => {
        compundSearchURL += `+${i > 0 ? "OR+" : ""}site%3A${link}.com`;
      });
      window.open(compundSearchURL);
    } else {
      window.open(`https://google.com/search?q=${input}`);
    }
  }
  return (
    <div className="input-wrap">
      <input
        type="text"
        className="input__search"
        placeholder="Enter your search..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></input>
      <button className="input__search--btn" onClick={handleSearch}>
        <i className="fa-solid fa-magnifying-glass">Search</i>
      </button>
    </div>
  );
}

2. Accept another function in WebButton called toggleActiveLink and a string called value which refers to the URL part. Call the function with the value inside handleToggle function.

function WebButton({ icon, name, toggleActiveLink, value }) {
  const [active, setActive] = useState(false);
  function handleToggle() {
    setActive(!active);
    toggleActiveLink(value);
  }
  return (
    <button
      className={active ? "websites-btn active" : "websites-btn"}
      style={{ color: active ? "blue" : "unset" }}
      onClick={handleToggle}
    >
      <i className={icon}></i>
      <div className="websites-name">{name}</div>
    </button>
  );
}

3. In the main component you have to create a local state to handle the active links. Create the toggle function as given. It will add the value if it is not there otherwise remove it.

const urls = [
  { name: "Reddit", value: "reddit" },
  { name: "Quora", value: "quara" },
  { name: "Facebook", value: "facebook" },
  { name: "Stackoverflow", value: "stackoverflow" },
  { name: "Twitter", value: "twitter" }
];

function App() {
  const [activeLinks, setActiveLinks] = useState([]);

  const toggleActiveLink = (link) => {
    const index = activeLinks.indexOf(link);
    if (index < 0) {
      setActiveLinks((prevLinks) => [...prevLinks, link]);
    } else {
      setActiveLinks((prevLinks) => prevLinks.filter((l) => l !== link));
    }
  };
  return (
    <>
      <Input activeLinks={activeLinks} />
      <div>
        {urls.map(({ name, value }) => (
          <WebButton
            name={name}
            value={value}
            toggleActiveLink={toggleActiveLink}
          />
        ))}
      </div>
    </>
  );
}