Dynamic New Items Feature

package.json

@@ -3,15 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.9",
     "firebase": "^9.8.4",
+    "owl.carousel": "^2.3.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -24,6 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
+    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css"> -->
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
@@ -72,5 +74,8 @@
       integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
       crossorigin="anonymous"
     ></script>
+
+    <!-- <script src="jquery.min.js"></script>
+<script src="owlcarousel/owl.carousel.min.js"></script> -->
   </body>
 </html>

src/App.jsx

@@ -5,6 +5,7 @@ import Author from "./pages/Author";
 import ItemDetails from "./pages/ItemDetails";
 import Nav from "./components/Nav";
 import Footer from "./components/Footer";
+import HotCollections from "./components/home/HotCollections";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/explore" element={<Explore />} />
+        <Route path=':id' element={<HotCollections />} />
         <Route path="/author" element={<Author />} />
         <Route path="/item-details" element={<ItemDetails />} />
       </Routes>

src/components/UI/UseCountdown.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from "react";
+
+const UseCountdown = (expiryDate) => {
+  const [timeLeft, setTimeLeft] = useState("");
+
+  useEffect(() => {
+    const targetDate = new Date(expiryDate).getTime();
+
+    function updateCountdown() {
+      const now = Date.now();
+      const distance = targetDate - now;
+      if (distance < 0) {
+        setTimeLeft("");
+        return;
+      }
+      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+      setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
+      setTimeout(updateCountdown, 1000);
+    }
+
+    updateCountdown();
+
+    // Cleanup on unmount
+
+    return () => clearTimeout(updateCountdown);
+  }, [expiryDate]);
+  return timeLeft;
+};
+
+export default UseCountdown;

src/components/home/HotCollections.jsx

@@ -1,9 +1,166 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import AuthorImage from "../../images/author_thumbnail.jpg";
-import nftImage from "../../images/nftImage.jpg";
+import axios from "axios";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import prevArrow from "../../images/chevron-left-solid.svg";
+import nextArrow from "../../images/chevron-right-solid.svg";
 
 const HotCollections = () => {
+  const [collections, setCollections] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  function SampleNextArrow(props) {
+    const { arrow__custom, style, onClick } = props;
+    return (
+      <div
+        id="arrows__custom"
+        className={arrow__custom}
+        style={{
+          ...style,
+          display: "block",
+          background: "white",
+          borderRadius: "50%",
+          width: "40px",
+          height: "40px",
+          lineHeight: "40px",
+          textAlign: "center",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          cursor: "pointer",
+          position: "absolute",
+          top: "50%",
+          right: "-5px",
+          transform: "translateY(-50%)",
+          zIndex: 1,
+          border: "1px solid lightgray",
+          transition: "all ease .5s",
+          ":hover": {
+            transform: "scale(1.05)",
+            boxShadow: "0 8px 8px rgba(0,0,0,0.1)",
+          },
+        }}
+        onClick={onClick}
+      >
+        <img
+          src={nextArrow}
+          style={{
+            width: "25px",
+            height: "10px",
+            lineHeight: "25px",
+            cursor: "pointer",
+            position: "absolute",
+            top: "50%",
+            left: "6.8px",
+            transform: "translateY(-50%)",
+            zIndex: 1,
+          }}
+        />
+      </div>
+    );
+  }
+
+  function SamplePrevArrow(props) {
+    const { arrow__custom, style, onClick } = props;
+    return (
+      <div
+        className={arrow__custom}
+        style={{
+          ...style,
+          display: "block",
+          background: "white",
+          borderRadius: "50%",
+          width: "40px",
+          height: "40px",
+          lineHeight: "40px",
+          textAlign: "center",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          cursor: "pointer",
+          position: "absolute",
+          top: "50%",
+          left: "-5px",
+          transform: "translateY(-50%)",
+          zIndex: 1,
+          border: "1px solid lightgray",
+          transition: "all ease .5s",
+          ":hover": {
+            transform: "scale(1.05)",
+            boxShadow: "0 8px 8px rgba(0,0,0,0.1)",
+          },
+        }}
+        onClick={onClick}
+      >
+        <img
+          src={prevArrow}
+          style={{
+            width: "25px",
+            height: "10px",
+            lineHeight: "25px",
+            cursor: "pointer",
+            position: "absolute",
+            top: "50%",
+            left: "6.8px",
+            transform: "translateY(-50%)",
+            zIndex: 1,
+          }}
+        />
+      </div>
+    );
+  }
+
+  const settings = {
+    dots: false,
+    infinite: true,
+    speed: 300,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    nextArrow: <SampleNextArrow />,
+    prevArrow: <SamplePrevArrow />,
+    responsive: [
+      {
+        breakpoint: 1200,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 1,
+          arrows: true,
+        },
+      },
+      {
+        breakpoint: 780,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 550,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          dots: true,
+        },
+      },
+    ],
+  };
+
+  async function fetchCollections() {
+    setLoading(true);
+    const { data } = await axios.get(
+      `https://us-central1-nft-cloud-functions.cloudfunctions.net/hotCollections`
+    );
+    console.log(data);
+    setCollections(data);
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      fetchCollections();
+    }, 3000);
+  }, []);
+
   return (
     <section id="section-collections" className="no-bottom">
       <div className="container">
@@ -14,29 +171,59 @@ const HotCollections = () => {
               <div className="small-border bg-color-2"></div>
             </div>
           </div>
-          {new Array(4).fill(0).map((_, index) => (
-            <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12" key={index}>
-              <div className="nft_coll">
-                <div className="nft_wrap">
-                  <Link to="/item-details">
-                    <img src={nftImage} className="lazy img-fluid" alt="" />
-                  </Link>
-                </div>
-                <div className="nft_coll_pp">
-                  <Link to="/author">
-                    <img className="lazy pp-coll" src={AuthorImage} alt="" />
-                  </Link>
-                  <i className="fa fa-check"></i>
+          {loading ? (
+            <h1>
+              <Slider {...settings}>
+                {new Array(4).fill(0).map((_, index) => (
+                  <div className="skeleton__loading" key={index}>
+                    <div className="nft_coll--loader">
+                      <div className="nft_wrap--loader"></div>
+                      <div className="nft_coll_pp--loader">
+                      <i className="fa fa-check"></i>
+                      </div>
+
+                      <div className="nft_coll_title--loader"></div>
+                      <div className="nft_coll_code--loader"></div>
+                    </div>
+                  </div>
+                ))}
+              </Slider>
+            </h1>
+          ) : (
+            <Slider {...settings}>
+              {collections.map((collection) => (
+                <div className="col-xs-12" key={collection.id}>
+                  <div className="nft_coll">
+                    <div className="nft_wrap">
+                      <Link to="/item-details">
+                        <img
+                          src={collection.nftImage}
+                          className="lazy img-fluid"
+                          alt=""
+                        />
+                      </Link>
+                    </div>
+                    <div className="nft_coll_pp">
+                      <Link to="/author">
+                        <img
+                          className="lazy pp-coll"
+                          src={collection.authorImage}
+                          alt=""
+                        />
+                      </Link>
+                      <i className="fa fa-check"></i>
+                    </div>
+                    <div className="nft_coll_info">
+                      <Link to="/explore">
+                        <h4>{collection.title}</h4>
+                      </Link>
+                      <span>ERC-{collection.code}</span>
+                    </div>
+                  </div>
                 </div>
-                <div className="nft_coll_info">
-                  <Link to="/explore">
-                    <h4>Pinky Ocean</h4>
-                  </Link>
-                  <span>ERC-192</span>
-                </div>
-              </div>
-            </div>
-          ))}
+              ))}
+            </Slider>
+          )}
         </div>
       </div>
     </section>