add-filter-data

src/App.css

@@ -190,8 +190,8 @@ button:hover:not(:disabled) {
 }
 
 .random-cat-image {
-  max-width: 100%;
+  max-width: 25%;
-  height: auto;
+  height: 30%;
   border-radius: 10px;
 }
 

src/App.js

@@ -20,7 +20,7 @@ const App = () => {
     const fetchCats = async () => {
       try {
         setLoading(true);
-        let queryParams = `?limit=20&page=${page}`;
+        let queryParams = `?limit=100&page=${page}`;
 
         if (filters.breed) queryParams += `&breed_ids=${filters.breed}`;
         if (filters.hairLength) queryParams += `&hair_length=${filters.hairLength}`;
@@ -34,9 +34,10 @@ const App = () => {
         );
 
         if (!response.ok) throw new Error("Failed to fetch data");
-
         const data = await response.json();
-      setCats((prevCats) => (page === 1 ? data : [...prevCats, ...data]));
+        const filterData = data.filter(item =>item.breeds.length !== 0); 
+      setCats((prevCats) => (page === 1 ? filterData : [...prevCats, ...filterData]));
+      
       }
       catch (err) {
         console.error(err.message);

src/env.js

@@ -1 +0,0 @@
-export const apiKey = "y816dBD1X9XGamg1kmSqSQ==wxo8g9UjpUo9r4HE";