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;