Update App.jsx

src/App.jsx

@@ -1,49 +1,52 @@
 import "./App.css";
+import { useState, useEffect } from "react";
+import Header from "./components/header";
+import SearchBar from "./components/searchBar";
+import Card from "./components/card";
 
 function App() {
+  const [filterCards, setFilterCards] = useState([]);
+
+  const cardsJSX = filterCards.map((card) => (
+    <Card
+      title={card.name}
+      description={card.description}
+      stars={card.score}
+      forks={card.forks}
+    />
+  ));
+
+  useEffect(() => {
+    fetch("https://api.github.com/search/repositories?q=stars:>10000", {
+      headers: {
+        Authorization: "Bearer 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",
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        setFilterCards(data.items);
+      });
+  }, []);
   return (
     <>
-      <header>
-        <div className="content-wrapper">
-          <h1>Welcome to the JSHeroes Bootcamp!</h1>
-        </div>
-        <img className="bear" src="/js-heroes-bear.png" />
-      </header>
-
+      <Header />
       <main>
-        <form className="search-form">
-          <input className="input" />
-          <button className="button">Search</button>
-        </form>
-
-        <ul className="repo-cards">
-          <li className="repo-card">
-            <span className="title">facebook/react</span>
-            <span className="description">placeholder description</span>
-            <section className="footer">
-              <div>Stars: 500</div>
-              <div>Forks: 100</div>
-            </section>
-          </li>
-
-          <li className="repo-card">
-            <span className="title">vuejs/vue</span>
-            <span className="description">placeholder description</span>
-            <section className="footer">
-              <div>Stars: 500</div>
-              <div>Forks: 100</div>
-            </section>
-          </li>
-
-          <li className="repo-card">
-            <span className="title">sveltejs/svelte</span>
-            <span className="description">placeholder description</span>
-            <section className="footer">
-              <div>Stars: 500</div>
-              <div>Forks: 100</div>
-            </section>
-          </li>
-        </ul>
+        <SearchBar
+          onSearch={(value) => {
+            console.log(value);
+            const items = [];
+            fetch(`https://api.github.com/search/repositories?q=${value}`)
+              .then((response) => response.json())
+              .then((data) => {
+                console.log(data);
+                setFilterCards(data.items);
+              });
+            console.log(items);
+            setFilterCards(items);
+          }}
+        />
+        <ul className="repo-cards">{cardsJSX}</ul>
       </main>
     </>
   );

src/components/card.jsx

@@ -0,0 +1,12 @@
+const Card = (props) => (
+  <li className="repo-card">
+    <span className="title">{props.title}</span>
+    <span className="description">{props.description}</span>
+    <section className="footer">
+      <div>Stars: {props.stars}</div>
+      <div>Forks: {props.forks}</div>
+    </section>
+  </li>
+);
+
+export default Card;

src/components/header.jsx

@@ -0,0 +1,10 @@
+const Header = () => (
+  <header>
+    <div className="content-wrapper">
+      <h1>Welcome to the JSHeroes Bootcamp!</h1>
+    </div>
+    <img className="bear" src="/js-heroes-bear.png" />
+  </header>
+);
+
+export default Header;

src/components/searchBar.jsx

@@ -0,0 +1,20 @@
+import { useRef } from "react";
+
+const SearchBar = (props) => {
+  let inputRef = useRef(null);
+  const handleSearch = (event) => {
+    event.preventDefault();
+    props.onSearch(inputRef.current.value);
+  };
+
+  return (
+    <form className="search-form">
+      <input ref={inputRef} className="input" />
+      <button onClick={handleSearch} className="button">
+        Search
+      </button>
+    </form>
+  );
+};
+
+export default SearchBar;