Fixes merge conflicts

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>
+    </>
+  )
+}

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>
+  )
+}

frontend/src/client/pages/Explore.tsx

@@ -1,17 +1,16 @@
 import React from "react";
 import { Footer } from "../components/Footer";
 import { Navbar } from "../components/Navbar";
-import { ContractsTable } from "../components/ContractsTable";
+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 />
-      <ContractsTable />
+      <ExploreRentals />
       <Footer />
     </div>
   );