diff --git a/src/App.jsx b/src/App.jsx
index 84162ae..2569455 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,49 +1,77 @@
import "./App.css";
+import Head from "./Components/Header/Header";
+import SearchForm from "./Components/SearchForm/SearchForm";
+import Card from "./Components/Card/Card";
+import { useState, useEffect } from "react";
-function App() {
- return (
- <>
-
+const cards = [
+ {
+ title: "facebook/react",
+ description: "placeholder description",
+ stars: 500,
+ forks: 100,
+ },
-
-
+ {
+ title: "vuejs/vue",
+ description: "placeholder description",
+ stars: 500,
+ forks: 100,
+ },
-
- -
- facebook/react
- placeholder description
-
-
Stars: 500
- Forks: 100
-
-
+ {
+ title: "sveltejs/svelte",
+ description: "test description",
+ stars: 500,
+ forks: 100,
+ },
+];
- -
- vuejs/vue
- placeholder description
-
-
Stars: 500
- Forks: 100
-
-
+function App() {
+ const [filteredCards, setFilteredCards] = useState(cards);
- -
- sveltejs/svelte
- placeholder description
-
-
Stars: 500
- Forks: 100
-
-
-
+ const cardsJSX = filteredCards.map((card) => (
+
+ ));
+ console.log("rerender", filteredCards);
+ useEffect(() => {
+ // cand apare componenta prima data
+ // console.log("prima data");
+ fetch("https://api.github.com/search/repositories?q=stars:>10000")
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data);
+ setFilteredCards(data.items);
+ });
+ }, []);
+ // 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
+ return (
+ <>
+
+
+ {
+ console.log(value);
+ fetch(`https://api.github.com/search/repositories?q=${value}`, {
+ headers: {
+ Authorization:
+ "Bearer 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",
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data);
+ setFilteredCards(data.items);
+ });
+ }}
+ />
+ {/* {render} */}
+
);
diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx
new file mode 100644
index 0000000..f0778c4
--- /dev/null
+++ b/src/Components/Card/Card.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+function Cards(props) {
+ console.log(props);
+ return (
+
+ -
+ {props.title}
+ {props.description}
+
+
Stars: {props.stars}
+ Forks: {props.forks}
+
+
+
+ );
+}
+
+export default Cards;
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx
new file mode 100644
index 0000000..58ce5b7
--- /dev/null
+++ b/src/Components/Header/Header.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+function Head() {
+ return (
+
+
+
Hello!
+
+ 
+
+ );
+}
+
+export default Head;
diff --git a/src/Components/SearchForm/SearchForm.jsx b/src/Components/SearchForm/SearchForm.jsx
new file mode 100644
index 0000000..956b871
--- /dev/null
+++ b/src/Components/SearchForm/SearchForm.jsx
@@ -0,0 +1,20 @@
+import React, { useRef } from "react";
+
+function SearchForm(props) {
+ const textInput = useRef(null);
+ function buttonClicked(e) {
+ e.preventDefault();
+ props.onSearch(textInput.current.value);
+ }
+
+ return (
+
+ );
+}
+
+export default SearchForm;