From 0979de56d1752a9fff3deb7f80061c2a69f03760 Mon Sep 17 00:00:00 2001
From: Cyrus Cowley <cyficowley@gmail.com>
Date: Fri, 29 Apr 2022 13:23:18 -0700
Subject: [PATCH] Beginnings of explore page

---
 frontend/src/client/App.tsx                   |  2 +
 .../src/client/components/ExploreRentals.tsx  | 44 ++++++++++++++
 .../src/client/components/ListingPanel.tsx    | 60 +++++++++++++++++++
 frontend/src/client/pages/Explore.tsx         | 19 ++++++
 4 files changed, 125 insertions(+)
 create mode 100644 frontend/src/client/components/ExploreRentals.tsx
 create mode 100644 frontend/src/client/components/ListingPanel.tsx
 create mode 100644 frontend/src/client/pages/Explore.tsx

diff --git a/frontend/src/client/App.tsx b/frontend/src/client/App.tsx
index 291e01f..1e20fe1 100644
--- a/frontend/src/client/App.tsx
+++ b/frontend/src/client/App.tsx
@@ -8,6 +8,7 @@ import WalletProvider from "./components/WalletProvider";
 import Main from "./pages/Main";
 import Create from "./pages/Create";
 import Find from "./pages/Find";
+import Explore from "./pages/Explore";
 import About from "./pages/About";
 import { ContextWrapper } from "./Context";
 
@@ -18,6 +19,7 @@ export const App = () => {
         <Routes>
           <Route path="/" element={<Main />} />
           <Route path="/create" element={<Create />} />
+          <Route path="/explore" element={<Explore />} />
           <Route path="/find" element={<Find />} />
           <Route path="/about" element={<About />} />
         </Routes>
diff --git a/frontend/src/client/components/ExploreRentals.tsx b/frontend/src/client/components/ExploreRentals.tsx
new file mode 100644
index 0000000..78d27d9
--- /dev/null
+++ b/frontend/src/client/components/ExploreRentals.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { NftWithMetadata, AvaliabilityStatus } from "../../../types/nftTypes.js";
+import { ListingPanel } from "./ListingPanel";
+
+
+export const ExploreRentals = () => {
+
+  const nft: NftWithMetadata = {
+    nft: {
+      listing: {
+        name: "Jelly bean",
+        description: "it has a crown and stuff",
+        datesForRent: [],
+        pricePerDay: 1,
+        collateral: 2,
+      },
+      nftSpecification: {
+        nftCollection: "0xa755a670aaf1fecef2bea56115e65e03f7722a79",
+        nftId: "0",
+      }
+    },
+    image: "https://ipfs.io/ipfs/QmNj6UmToxxnJFqW13GkG3NHX1FXtHsHwAbuB8uQasPZUm",
+    avaliability: {
+      status: AvaliabilityStatus.Avaliabile,
+    },
+    attributes: [{ traitType: "asdf", value: "asdf2" }]
+  };
+
+  let panels = []
+
+  for (let i = 0; i < 8; i++) {
+    panels.push(<ListingPanel nft={nft} />);
+  }
+
+
+  return (
+    <>
+      <p>Exploring the rentals</p>
+      <div className="container">
+        <div className="grid grid-cols-4 gap-4 w-full">{panels}</div>
+      </div>
+    </>
+  )
+}
diff --git a/frontend/src/client/components/ListingPanel.tsx b/frontend/src/client/components/ListingPanel.tsx
new file mode 100644
index 0000000..1ca1fa7
--- /dev/null
+++ b/frontend/src/client/components/ListingPanel.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { NftWithMetadata, Avaliability, AvaliabilityStatus } from "../../../types/nftTypes.js";
+
+
+export const ListingPanel = ({ nft }: { nft: NftWithMetadata }) => {
+
+  const renderAvaliability = (availability: Avaliability) => {
+
+    let statusText;
+    switch (availability.status) {
+      case AvaliabilityStatus.Avaliabile:
+        statusText = 'Avaliable Now!';
+        break;
+      case AvaliabilityStatus.Rented:
+        statusText = 'Currently rented, available on ' + availability.AvaliabiltyDate + "!";
+        break;
+      case AvaliabilityStatus.Unavaliabile:
+        statusText = 'Currently unavailable';
+        break;
+      case AvaliabilityStatus.Upcoming:
+        statusText = 'Will be available on ' + availability.AvaliabiltyDate + "!";
+        break;
+    }
+
+    let classes = "border-2 border-black bg-slate-200  py-1 px-2 text-sm";
+    if (availability.status === AvaliabilityStatus.Avaliabile) {
+      classes += " hover:bg-slate-400 cursor-pointer";
+    }
+    else {
+      classes += " cursor-default";
+    }
+
+    return <button className={classes}>{statusText}</button>
+  }
+
+  return (
+    <div className="bg-white p-3 shadow">
+      <div className="imageContainer w-full overflow-auto bg-black bg-center bg-cover" style={{ backgroundImage: `url(${nft.image})` }}>
+        <div className="w-full" style={{ marginTop: "100%", }} >
+        </div>
+      </div>
+      <div >
+        <div className="w-full flex items-center pb-2">
+          <h1 className="text-lg font-bold">{nft.nft.listing.name}</h1>
+          <div className="flex-grow pl-1"></div>
+          <p>ETH({nft.nft.listing.pricePerDay}) / day</p>
+        </div>
+        {nft.attributes.map(attribute => (
+          <div className="inline-block bg-slate-200 px-2 py-1 rounded-xl text-xs mr-2 mb-2">
+            <span className="font-bold">{attribute.traitType}</span>: {attribute.value}
+          </div>
+        ))}
+        <p>{nft.nft.listing.description}</p>
+        <div className="pt-2">
+          {renderAvaliability(nft.avaliability)}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/client/pages/Explore.tsx b/frontend/src/client/pages/Explore.tsx
new file mode 100644
index 0000000..c19ea68
--- /dev/null
+++ b/frontend/src/client/pages/Explore.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Footer } from "../components/Footer";
+import { Navbar } from "../components/Navbar";
+import { ExploreRentals } from "../components/ExploreRentals";
+import { useAppContext } from "../Context";
+
+const Explore = () => {
+  const { name, setName } = useAppContext();
+  
+  return (
+    <div className="flex bg-white-100 items-center flex-col justify-between h-screen">
+      <Navbar />
+      <ExploreRentals />
+      <Footer />
+    </div>
+  );
+};
+
+export default Explore;