load more data project - complete the products generate from api and …

…it's responsive yay ._.

src/App.jsx

@@ -9,6 +9,7 @@ import Accordion from "@/pages/accordion/accordion";
 import RandomColor from "@/pages/RandomColor";
 import StarRating from "@/pages/StarRating";
 import ImageSlider from "@/pages/ImageSlider"
+import LoadMoreData from "./pages/LoadMoreData";
 
 function App() {
   return (
@@ -24,7 +25,9 @@ function App() {
           {/* Star Rating */}
           <Route path="star-rating" element={<StarRating />} />
           {/* image Slider */}
-          <Route path='image-slider' element={<ImageSlider url={'https://meme-api.com/gimme'} limit={'10'} />} />
+          <Route path='image-slider' element={<ImageSlider url={'https://meme-api.com/gimme'} limit={10} />} />
+          {/* load more data button */}
+          <Route path='load-more-data' element={<LoadMoreData />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/pages/Home.jsx

@@ -9,6 +9,7 @@ function Home() {
       <Link to='color-generator'>random Color Generator</Link>
       <Link to='star-rating'>star rating</Link>
       <Link to='image-slider'>image slider</Link>
+      <Link to='load-more-data'>load more button</Link>
     </div>
   );
 }

src/pages/LoadMoreData.jsx

@@ -0,0 +1,60 @@
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+
+function LoadMoreData() {
+  const [loading, setLoading] = useState(false);
+  const [products, setProducts] = useState([]);
+  const [count, setCount] = useState(0);
+
+  async function fetchProducts() {
+    try {
+      setLoading(true);
+      const response = await fetch(
+        `https://dummyjson.com/products?limit=20&skip=${count === 0 ? 0 : count * 20}`,
+      );
+
+      const result = await response.json();
+
+      if (result && result.products && result.products.length) {
+        setProducts(result.products);
+        setLoading(false);
+      }
+    } catch (e) {
+      console.log(e);
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  if (loading) {
+    return <div>Loading data ! Please wait man</div>;
+  }
+
+  return (
+    <div
+      className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full`}
+    >
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3">
+        {products && products.length
+          ? products.map((item) => (
+            <div
+              className="p-5 border-border border-2 flex flex-col items-center justify-center gap-3"
+              key={item.id}
+            >
+              <img src={item.thumbnail} alt={item.title} />
+              <p className="font-mono">{item.title}</p>
+            </div>
+          ))
+          : null}
+      </div>
+      <div className="btn-container">
+        <Button variant="secondary">Load More Products</Button>
+      </div>
+    </div>
+  );
+}
+
+export default LoadMoreData;