Merge pull request #61 from anmolsah/feature/add-pagination-crypto

Added pagination for top coins in Crypto.jsx (#41)

Author: venisha-kalola

src/pages/Crypto.jsx

@@ -18,46 +18,77 @@
  *  - [ ] Dark mode adaptive coloring for charts
  *  - [ ] Extract to service + custom hook (useCryptoMarkets)
  */
-import { useEffect, useState } from 'react';
-import Loading from '../components/Loading.jsx';
-import ErrorMessage from '../components/ErrorMessage.jsx';
-import Card from '../components/Card.jsx';
+import { useEffect, useState } from "react";
+import Loading from "../components/Loading.jsx";
+import ErrorMessage from "../components/ErrorMessage.jsx";
+import Card from "../components/Card.jsx";
 
 export default function Crypto() {
   const [coins, setCoins] = useState([]);
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
 
-  useEffect(() => { fetchCoins(); }, []);
+  useEffect(() => {
+    fetchCoins();
+  }, [page]);
 
   async function fetchCoins() {
     try {
-      setLoading(true); setError(null);
-      const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=50&page=1&sparkline=false');
-      if (!res.ok) throw new Error('Failed to fetch');
+      setLoading(true);
+      setError(null);
+      const res = await fetch(
+        `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=50&page=${page}&sparkline=false`
+      );
+      if (!res.ok) throw new Error("Failed to fetch");
       const json = await res.json();
       setCoins(json);
-    } catch (e) { setError(e); } finally { setLoading(false); }
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
   }
 
-  const filtered = coins.filter(c => c.name.toLowerCase().includes(query.toLowerCase()));
+  const filtered = coins.filter((c) =>
+    c.name.toLowerCase().includes(query.toLowerCase())
+  );
 
   return (
     <div>
       <h2>Cryptocurrency Tracker</h2>
-      <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search coin" />
+      <input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search coin"
+      />
+
       {loading && <Loading />}
       <ErrorMessage error={error} />
       <div className="grid">
-        {filtered.map(c => (
-          <Card key={c.id} title={c.name} footer={<span>${c.current_price}</span>}>
+        {filtered.map((c) => (
+          <Card
+            key={c.id}
+            title={c.name}
+            footer={<span>${c.current_price}</span>}
+          >
             <p>Market Cap: ${c.market_cap.toLocaleString()}</p>
             <p>24h: {c.price_change_percentage_24h?.toFixed(2)}%</p>
             {/* TODO: Add mini sparkline chart */}
           </Card>
         ))}
       </div>
+
+      <div className="pagination">
+        <button onClick={() => setPage((p) => p - 1)} disabled={page === 1}>
+          Previous
+        </button>
+
+        <span>Page {page}</span>
+
+        <button onClick={() => setPage((p) => p + 1)}>Next</button>
+      </div>
     </div>
   );
 }

src/styles.css

@@ -412,3 +412,35 @@ blockquote {
 @media (max-width: 640px) {
   .weather-inner { padding: 1rem; }
 }
+
+
+/**Pagination **/
+
+.pagination {
+  width: 100%;
+  display: flex;
+  justify-content: center;  
+  align-items: center;     
+  margin-top: 20px;         
+  gap: 15px;           
+}
+
+.pagination button {
+  padding: 8px 16px;
+  border-radius: 5px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.pagination button:hover {
+  background-color: #0056b3;
+}
+
+.pagination button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}