Skip to content

Commit

Permalink
conflicts resolved
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jonath-z
Jonath-z committed Aug 4, 2022
2 parents 9c0e359 + ace9bac commit 5b4597e
Show file tree
Hide file tree
Showing 27 changed files with 752 additions and 206 deletions.
44 changes: 44 additions & 0 deletions components/NftDetailsPage/NftDetailTabs/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Tab } from "@headlessui/react";
import React from "react";

const NftsDetailTabs = () => {
return (
<Tab.List className="my-12 dark:text-white">
<Tab.List
className={
"text-gray-600 flex justify-between space-x-6 mx-auto max-w-md mt-3 bg-gray-100 dark:bg-darkLight p-1 rounded-md"
}
>
<Tab
className={({ selected }) =>
selected
? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:bg-darkPrimary transition-all dark:text-white"
: "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
}
>
Overview
</Tab>
<Tab
className={({ selected }) =>
selected
? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:text-white dark:bg-darkPrimary transition-all"
: "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
}
>
Bids
</Tab>
<Tab
className={({ selected }) =>
selected
? "font-extrabold text-gray-900 p-3 rounded-md bg-white dark:text-white dark:bg-darkPrimary transition-all"
: "text-black p-2 dark:bg-transparent dark:text-gray-300 font-semibold transition-all"
}
>
History
</Tab>
</Tab.List>
</Tab.List>
);
};

export default NftsDetailTabs;
211 changes: 211 additions & 0 deletions components/NftDetailsPage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
/* eslint-disable @next/next/link-passhref */
/* eslint-disable @next/next/no-img-element */
import NftPreview from "@components/CreateNftPage/NftPreview";
import useClickOutside from "@components/hooks/useClickOutside";
import useNfTs from "@components/hooks/useNFTs";
import NFTCard from "@components/modules/__modules__/Card/NFTCard";
import ListViewBuilder from "@components/modules/__modules__/ListViewBuilder";
import ShareContainer from "@components/modules/__modules__/ShareContainer";
import ShowWidget from "@components/modules/__modules__/ShowWidget";
import {
DotsVector,
HeartVector,
VShare,
} from "@components/modules/__modules__/_vectors";
import Header from "@components/modules/__noAuth/Header";
import { Tab } from "@headlessui/react";
import { sharePageLinkAtom } from "@lib/atoms";
import { NFTData, NFTMetaData } from "@lib/models/GeneralModel";
import { backendApiService } from "@lib/services/BackendApiService";
import { List } from "antd";
import Link from "next/link";
import React, { FC, useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import NftBid from "./modules/NftBid";
import NftOverView from "./modules/NftOverview";
import NftsDetailTabs from "./NftDetailTabs";

interface IProps {
nft: NFTData;
}

const NftDetailsPage: FC<IProps> = ({ nft }) => {
const [ownerNfts, setOwnerNfts] = useState<{
nfts: NFTData[];
metadata: NFTMetaData | null;
isLoading: boolean;
}>({
nfts: [],
isLoading: true,
metadata: null,
});
const [isNftOptions, setIsNftOptions] = useState(false);
const [isShareContainer, setIsShareContaner] =
useRecoilState(sharePageLinkAtom);

const { onLoadMore, shouldShowLoadMoreButton } = useNfTs();

const reportRef = useClickOutside(() => setIsNftOptions(false));

useEffect(() => {
if (nft)
(async () => {
setOwnerNfts({
...ownerNfts,
isLoading: true,
});
const response = await backendApiService.findNFts({
walletAddress: nft.owner.walletAddress,
});

setOwnerNfts({
nfts: response.nfts,
metadata: response.meta,
isLoading: false,
});
})();
}, []);

const toggleNftOptions = () => {
setIsNftOptions(!isNftOptions);
};

const toggleShareContainer = () => {
setIsShareContaner(!isShareContainer);
};

return (
<>
<Header />
<div className="2xl:w-[80%] xl:w-[85%] lg:w-[90%] min-lg:w-[92%] mx-auto h-fit">
<div className="flex min-lg:flex-col pt-24 gap-10 relative">
<section>
<div>
<img
src={nft.url || nft.urlCompressed || nft.urlThumbnail || ""}
alt={nft.name}
className="2xl:w-[700px] 2xl:h-[700px] xl:w-[600px] xl:h-[600px] lg:w-[500px] lg:h-[500px] min-lg:w-full min-lg:h-auto object-cover rounded-lg mx-20 min-lg:mx-0 transition-all"
/>
</div>
<Tab.Group>
<NftsDetailTabs />
<Tab.Panels>
<NftOverView nft={nft} />
<NftBid />
</Tab.Panels>
</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
src={
nft.owner.avatarUrl ||
nft.owner.avatarUrlCompressed ||
nft.owner.avatarUrlThumbnail ||
""
}
alt={nft.owner.username}
className="w-12 h-12 object-cover rounded-full"
/>
<div>
<p className="text-gray-500 font-bold dark:text-gray-300">
Current owner
</p>
<p className="font-bold dark:text-white">
{nft.owner.username}
</p>
</div>
</div>
</Link>

<div className="flex justify-between py-5 items-center text-gray-500 dark:text-gray-300 relative">
<div className="flex gap-10 items-center ">
<p className="flex items-center gap-2 hover:text-black hover:dark:text-white cursor-pointer transition-all">
<span>
<HeartVector className="h-6 w-6" />
</span>
<span className="font-bold">0</span>
</p>
<p
role="button"
onClick={toggleShareContainer}
className="flex items-center gap-2 cursor-pointer hover:text-black hover:dark:text-white transition-all"
>
<span className="font-bold text-2xl">
<VShare />
</span>
<span className="font-bold">Share</span>
</p>
</div>
<p
role="button"
onClick={toggleNftOptions}
className="cursor-pointer hover:text-black hover:bg-gray-100 p-2 dark:hover:bg-darkLight rounded-xl hover:dark:text-white transition-all"
>
<DotsVector className="h-6 w-6" />
</p>

<div className="absolute">
<ShareContainer />
</div>

<div
ref={reportRef}
className={`${
!isNftOptions
? "scale-0 transition-all"
: "scale-100 transition-all"
} absolute right-0 mt-20 bg-white py-5 px-3 border shadow-lg rounded-lg font-bold dark:bg-darkLight dark:border-gray-600 cursor-pointer transition-all dark:hover:text-white hover:text-black`}
>
<p>Report this NFT</p>
</div>
</div>

<div className="border pt-5 px-5 mt-5 rounded-lg dark:border-gray-600">
<div className="bg-gray-100 dark:bg-darkLight py-5 px-3 rounded-lg flex flex-col gap-1">
<p className="text-gray-700 font-bold dark:text-gray-200">
Price
</p>
<p className="font-bold dark:text-white">{nft.price} MATIC</p>
</div>

<button className="bg-blue-600 w-full py-2 my-5 text-white font-bold rounded-lg hover:bg-blue-700 transition-all">
Buy now for {nft.price} MATIC
</button>
</div>
</section>
</div>
<div>
<h1 className="text-2xl py-10 text-center font-bold">
More from The Owner
</h1>
</div>
<div
className={`${
ownerNfts.isLoading
? "2xl:h-[40rem] xl:h-[40rem] lg:h-[60rem] md:h-[60rem] mobile:h-[120rem]"
: ""
}`}
>
<ListViewBuilder
items={ownerNfts.nfts}
renderItem={(item) => (
<List.Item>
<NFTCard nft={item} />
</List.Item>
)}
hasMore={false}
showLoadMoreButton={shouldShowLoadMoreButton}
loading={ownerNfts.isLoading}
loadingMore={false}
onLoadMore={onLoadMore}
/>
</div>
</div>
</>
);
};

export default NftDetailsPage;
20 changes: 20 additions & 0 deletions components/NftDetailsPage/modules/NftBid/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from "react";
import { VFlash } from "@components/modules/__modules__/_vectors";
import { Tab } from "@headlessui/react";

const NftBid = () => {
return (
<Tab.Panel>
<div className="flex flex-col gap-4 text-gray-700 justify-center items-center border h-36 mb-10 rounded-lg">
<p>
<VFlash />
</p>
<p className="font-bold">
No active bids yet. Be the first to make a bid!
</p>
</div>
</Tab.Panel>
);
};

export default NftBid;
64 changes: 64 additions & 0 deletions components/NftDetailsPage/modules/NftOverview/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/* eslint-disable @next/next/link-passhref */
import React, { FC } from "react";
import { Tab } from "@headlessui/react";
import { NFTData } from "@lib/models/GeneralModel";
import {
PolygonVectorOutLine,
PolygonVectorSolid,
} from "@components/modules/__modules__/_vectors/polygonVector";
import { VEye } from "@components/modules/__modules__/_vectors";
import Link from "next/link";

interface IProps {
nft: NFTData;
}

const NftOverView: FC<IProps> = ({ nft }) => {
return (
<Tab.Panel>
<div className="pt-6">
<h2 className="text-2xl font-bold dark:text-white">Description</h2>
<p className="text-gray-500 font-bold py-2 dark:text-gray-200">
{nft.description}
</p>
</div>
<div className="pt-6">
<h2 className="text-2xl font-bold dark:text-white">Latet Bids</h2>
<div className="border dark:border-gray-600 dark:text-gray-200 py-5 px-3 my-2 rounded-lg text-gray-500 font-bold">
No bids yet.
</div>
</div>
<div className="py-6">
<h2 className="text-2xl font-bold dark:text-white">Details</h2>
<div className="border py-5 px-3 mt-3 rounded-lg dark:border-gray-600">
<ul className="flex flex-col justify-center gap-5">
<li className="flex items-center gap-3 text-gray-700 dark:text-gray-200">
<PolygonVectorOutLine className="w-6 h-6" />
<p className="font-bold">Polygon ERC-721</p>
</li>
<a
href={`https://polygonscan.com/tx/${nft.mintTransactionHash}`}
target="_blank"
rel="noreferrer"
>
<li className="flex items-center gap-3 text-gray-700 dark:hover:text-white dark:text-gray-200 hover:text-black cursor-pointer">
<PolygonVectorSolid className="w-6 h-6 transition-all" />
<p className="font-bold transition-all">View on Polygonscan</p>
</li>
</a>
<a href={nft?.url} target="_blank" rel="noreferrer">
<li className="flex items-center gap-3 text-gray-700 dark:hover:text-white dark:text-gray-200 hover:text-black cursor-pointer">
<VEye className="w-6 h-6 transition-all" />
<p className="font-bold transition-all">
Open original on IPFS
</p>
</li>
</a>
</ul>
</div>
</div>
</Tab.Panel>
);
};

export default NftOverView;
Loading

0 comments on commit 5b4597e

Please sign in to comment.