nft detail page added

components/NftDetailsPage/index.tsx

@@ -96,7 +96,6 @@ const NftDetailsPage: FC<IProps> = ({ nft }) => {
             </Tab.Group>
           </section>
           <section className="w-96 min-lg:w-full">
-            <h1 className="text-3xl font-bold dark:text-white">{nft.name}</h1>
             <Link href={`/profile/${nft.owner.walletAddress}`}>
               <div className="py-5 flex gap-3 border-b dark:border-b-gray-600 cursor-pointer">
                 <img

components/modules/__modules__/Card/LiveAuctionsCard/index.jsx

@@ -0,0 +1,33 @@
+/* eslint-disable @next/next/no-img-element */
+
+import React from "react";
+import { dummy_data } from "../../../__noAuth/LiveAuctions/dummy_data";
+import NFTCard from "../NFTCard";
+
+const LiveAuctionsCard = () => {
+  const { liveAuctionsData } = dummy_data;
+  return (
+    <div className="md:grid md:grid-rows-1 gap-x-3 gap-y-4 md:grid-flow-col grid-flow-col-dense grid grid-rows-1">
+      {liveAuctionsData &&
+        liveAuctionsData.map((item, index) => {
+          const { url, title, subTitle, likes, price } = item;
+          return (
+            // <div key={index} className="flex font-ibmPlexSans gap-3 w-full">
+            <NFTCard
+              key={index}
+              nftUrl={url}
+              nftPrice={price}
+              nftName={title}
+              ownerProfile={url}
+              ownerName={subTitle}
+              likes={likes}
+              isAuction={true}
+            />
+            // </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default LiveAuctionsCard;

components/modules/__modules__/Card/NftCard/index.tsx

@@ -0,0 +1,83 @@
+// /* eslint-disable @next/next/no-img-element */
+// import { DotsVector, Ethereum, HeartVector } from "../../_vectors";
+import { FC } from "react";
+// import TimeLeftCard from "../TimeLeftCard";
+
+interface IProps {
+  nftUrl: string;
+  nftPrice: string;
+  nftName: string;
+  ownerAvatarUrl?: string;
+  ownerName?: string;
+  likes?: number;
+  auction?: string;
+  isBuyAvailable?: boolean;
+}
+
+const NFTCard: FC<IProps> = ({
+  nftUrl,
+  nftName,
+  nftPrice,
+  likes,
+  auction,
+  ownerName,
+  ownerAvatarUrl,
+  isBuyAvailable = true,
+}) => {
+  //   return (
+  //     <div className="flex w-full shadow-lg mx-auto p-5 rounded-xl flex-col bg-white dark:bg-darkLight dark:text-white">
+  //       <div
+  //         className={`flex mx-1 items-center justify-between ${
+  //           !ownerAvatarUrl && "hidden"
+  //         }`}
+  //       >
+  //         <div className="rounded-full w-7 h-7">
+  //           <img
+  //             src={ownerAvatarUrl}
+  //             alt={ownerName}
+  //             className="object-cover w-7 h-7 rounded-full"
+  //           />
+  //         </div>
+  //         <DotsVector className="w-4 h-4 opacity-70" />
+  //       </div>
+  //       <div className="h-[60%]">
+  //         <img
+  //           src={nftUrl}
+  //           alt={nftName}
+  //           className="w-full h-full object-cover rounded-xl shadow-lg border-gray-400"
+  //         />
+  //       </div>
+  //       <button className="py-1 px-3  rounded-xl  bg-white border-2 border-purple-500 absolute mt-48 text-gray-700 font-bold">
+  //         <TimeLeftCard />
+  //         <span className="text-gray-400 mx-2 font-sans">left</span> 🔥
+  //       </button>
+  //       <div className="mt-3 flex justify-between pt-2">
+  //         <p className="text-sm font-bold">{nftName}</p>
+  //         <Ethereum className="h-6 w-6" />
+  //       </div>
+  //       <div className="mt-4 flex items-end justify-between">
+  //         <div>
+  //           <p className="text-sm font-bold">
+  //             {nftPrice} ETH
+  //             <span className="text-gray-500 text-sm font-bold mx-1">
+  //               {auction}
+  //             </span>
+  //           </p>
+  //           <button
+  //             className={`text-blue-500 font-bold text-sm pt-1 ${
+  //               !isBuyAvailable && "hidden"
+  //             }`}
+  //           >
+  //             Buy now
+  //           </button>
+  //         </div>
+  //         <div className={`${likes && "flex"} opacity-80`}>
+  //           <HeartVector className="h-6 w-6" />
+  //           <p className="text-xl ml-2 font-bold">{likes}</p>
+  //         </div>
+  //       </div>
+  //     </div>
+  //   );
+};
+
+// export default NFTCard;

components/modules/__modules__/Card/TopSellersCard/index.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable @next/next/no-img-element */
+import { formatToDollars } from "helpers/numberFormatter";
+import { dummy_data } from "../../../__noAuth/TopSellers/dummy_data";
+import CheckmarkCard from "../CheckmarkCard";
+
+const TopSellersCard = () => {
+  const { topSellersData } = dummy_data;
+  return (
+    <>
+      {topSellersData.map((seller) => {
+        return (
+          <div
+            className="flex-none h-14 w-[250px] bg-none flex items-center mx-1 my-2"
+            key={seller.id}
+          >
+            <span className="text-gray-400">{seller.id}</span>
+            <div className="flex">
+              <section className="relative">
+                <img
+                  src={seller.url}
+                  alt="profile"
+                  className="h-12 w-12 rounded-full ml-4 mr-4"
+                />
+                <CheckmarkCard className="h-8 absolute bottom-[-7px] right-2" />
+              </section>
+              <section>
+                <h4 className="text-black text-sm font-bold dark:text-white">
+                  {seller.title}
+                </h4>
+                <span className="text-sm font-semibold text-gray-400">
+                  {formatToDollars(seller.price)}
+                </span>
+              </section>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default TopSellersCard;

components/modules/__modules__/ListViewBuilder/CustomLoadingFallback/index.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from "react";
+import { Spin } from "antd";
+import NFTCardFallback from "../../NFTCardFallback";
+
+const fallback = <NFTCardFallback />;
+
+const CustomLoadingFallback: FC = () => <Spin indicator={fallback} />;
+
+export default CustomLoadingFallback;

components/modules/__modules__/NftList/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Nftlist = () => {
+  return <div>Nftlist</div>;
+};
+
+export default Nftlist;

components/modules/__noAuth/LiveAuctions/allLiveAuctions/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import LiveAuctionsCard from "../../../__modules__/Card/LiveAuctionsCard";
+const AllLiveAuctions = () => {
+  return <LiveAuctionsCard />;
+};
+
+export default AllLiveAuctions;

helpers/TimeLeft.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useEffect, useState } from "react";
+const TimeLeft = () => {
+  const [timeUp, setTimeUp] = useState(true);
+  const [days, setDays] = useState(0);
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    const target = new Date("12/31/2022 23:59:59");
+    const interval = setInterval(() => {
+      const now = new Date();
+      const difference = target.getTime() - now.getTime();
+      const d = Math.floor(difference / (1000 * 60 * 60 * 24));
+      setDays(d);
+      const h = Math.floor(
+        (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      setHours(h);
+      const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
+      setMinutes(m);
+      const s = Math.floor((difference % (1000 * 60)) / 1000);
+      setSeconds(s);
+    }, 1000);
+    if (days >= 0 && hours >= 0 && minutes >= 0 && seconds >= 0) {
+      setTimeUp(false);
+    }
+    return () => clearInterval(interval);
+  }, [days, hours, minutes, seconds, timeUp]);
+  return (
+    <>
+      {timeUp ? (
+        <span className="text-gray-700 font-sans">Expired</span>
+      ) : (
+        <span className="text-gray-700 font-sans">
+          {hours}:{minutes}:{seconds}
+        </span>
+      )}
+    </>
+  );
+};
+export default TimeLeft;