Elian - first commit

src/App.jsx

@@ -1,19 +1,50 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { createRoot } from "react-dom/client";
 // import axios from "axios"; // Maybe we'll need axios? 🤔
+import axios from "axios";
 import "./style.css";
-
+import GifCard from "./GifCard";
+import SearchField from "./SearchField";
 // const GIPHY_API_KEY = "YOUR_API_KEY";
+const apiKey = 'XFrizQa5xUa0QyIdpW7DVlGPZTC2p9m3';
+const url = `http://api.giphy.com/v1/gifs/trending?api_key=${apiKey}`
+
 
 const App = () => {
+  const [trending, setTrending] = useState([]);
+
+  const fetchGif = async () => {
+    try {
+      const response = await axios.get(url);
+      const gifData = response.data
+      setTrending(gifData.data);
+    } catch (err) {
+      console.error("Error fetching gifs:", err);
+    }
+  };
+
+  useEffect(() => {
+    fetchGif();
+  }, []);
+
+  console.log(trending);
+
   return (
-    <div className="app">
-      <h1 className="title">Let's Make Some API Requests!</h1>
+    <div className="gif-container">
+      <h1 className="title">Welcome to Giphy!</h1>
+      <div className="gif-input">
+        <SearchField data={trending} />
+      </div>
+      <div className="gif-grid">
+        {trending.map((gif) => (
+          <GifCard key={gif.id} src={gif.images.fixed_height.url} alt={gif.title} />
+        ))}
+      </div>
+
     </div>
   );
 };
 
-// The following lines initialize your React application and inject
-// it into the index.html
+
 const root = createRoot(document.getElementById("root"));
 root.render(<App />);

src/GifCard.jsx

@@ -1,7 +1,9 @@
 import React from "react";
 
-const GifCard = () => {
-  return <div className="gif-card"></div>;
+const GifCard = ({ src }) => {
+  return <div className="gif-card">
+    <img src={src} alt="gif img" className="gif-img" />
+  </div>;
 };
 
 export default GifCard;

src/SearchField.jsx

@@ -1,7 +1,54 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 const SearchField = () => {
-  return <div></div>;
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filteredData, setFilteredData] = useState([]);
+  const [apiGif, setApiGif] = useState([]);
+  const url = `https://api.giphy.com/v1/gifs/search?q=${searchQuery}&api_key=XFrizQa5xUa0QyIdpW7DVlGPZTC2p9m3`;;
+
+
+
+  const dataFiltered = async () => {
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      setApiGif(data.data);
+      setFilteredData(data.data);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  useEffect(() => {
+    dataFiltered();
+  }, [searchQuery])
+
+
+
+  const handleInputChange = (e) => {
+    setSearchQuery(e.target.value);
+  }
+
+
+
+  return <div>
+    <input type="text"
+      placeholder="Search..."
+      value={searchQuery}
+      onChange={handleInputChange}
+      className="search-input"
+    />
+    <div className="gif-grid">
+      {filteredData.map((item) => (
+        <div className="gif-card" key={item.id}>
+          <img className="gif-img" src={item.images.fixed_height.url} alt={item.title} />
+        </div>
+      ))}
+    </div>
+
+
+
+  </div>;
 };
 
 export default SearchField;

src/style.css

@@ -7,6 +7,7 @@
 
 body {
   background-color: #160f29;
+  padding: 20px;
 }
 
 .title {
@@ -25,14 +26,65 @@ body {
   min-height: 100vh;
 }
 
+.gif-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.gif-input {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.search-input {
+  width: 600px;
+  padding: 12px;
+  border-radius: 5px;
+  border: none;
+  margin-bottom: 20px;
+  font-size: 1rem;
+}
+
+.search-input:focus {
+  outline: none;
+  box-shadow: 0 0 5px rgba(88, 84, 84, 0.5);
+}
+
+.search-input::placeholder {
+  color: #cccccc;
+  font-size: 16px;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.gif-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 1rem;
+  justify-items: center;
+}
+
 .gif-card {
-  width: 200px;
-  height: 200px;
   border-radius: 10px;
   overflow: hidden;
   margin: 1rem;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border: 2px solid #ffffff;
+  transition: transform 0.2s ease-in-out;
+}
+
+.gif-card:hover {
+  transform: scale(1.05);
+  cursor: pointer;
 }
 
-.gif-card img {
+.gig-img {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
 }