From f4d6d3e0a8219c0955760b0f5f43249bc2cbb736 Mon Sep 17 00:00:00 2001
From: Aryan Bhasin <bhasinaryan@gmail.com>
Date: Fri, 29 Apr 2022 14:53:30 -0400
Subject: [PATCH] Adds zero-state UI for My Rentals

---
 frontend/src/client/App.tsx               |  2 +
 frontend/src/client/components/Navbar.tsx |  3 ++
 frontend/src/client/pages/Rentals.tsx     | 45 +++++++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 frontend/src/client/pages/Rentals.tsx

diff --git a/frontend/src/client/App.tsx b/frontend/src/client/App.tsx
index 291e01f..66fe0cc 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 Rentals from "./pages/Rentals";
 import About from "./pages/About";
 import { ContextWrapper } from "./Context";
 
@@ -19,6 +20,7 @@ export const App = () => {
           <Route path="/" element={<Main />} />
           <Route path="/create" element={<Create />} />
           <Route path="/find" element={<Find />} />
+          <Route path="/rentals" element={<Rentals /> } />
           <Route path="/about" element={<About />} />
         </Routes>
       </WalletProvider>
diff --git a/frontend/src/client/components/Navbar.tsx b/frontend/src/client/components/Navbar.tsx
index cf0da87..3aaa2f9 100644
--- a/frontend/src/client/components/Navbar.tsx
+++ b/frontend/src/client/components/Navbar.tsx
@@ -19,6 +19,9 @@ export const Navbar = () => {
           <div className="text-white hover:text-indigo-100 font-bold py-2 px-4">
             <Link to="/find">Find</Link>
           </div>
+          <div className="text-white hover:text-indigo-100 font-bold py-2 px-4">
+            <Link to="/rentals">My Rentals</Link>
+          </div>
           <div className="text-white hover:text-indigo-100 font-bold py-2 pl-4 pr-10">
             <Link to="/about">About</Link>
           </div>
diff --git a/frontend/src/client/pages/Rentals.tsx b/frontend/src/client/pages/Rentals.tsx
new file mode 100644
index 0000000..ed4d029
--- /dev/null
+++ b/frontend/src/client/pages/Rentals.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { Navbar } from "../components/Navbar";
+import { Footer } from "../components/Footer";
+
+const Rentals = () => {
+    return (
+        <div className="flex bg-white-100 flex-col justify-start h-screen">
+            <Navbar />
+            <MyListingsView />
+            <MyRentalsView />
+            <div className="flex flex-col items-center">
+                <Footer />
+            </div>
+        </div>
+    );
+}
+
+const MyListingsView = () => {
+    return (
+        <div className="m-20 space-y-6">
+            <h1 className="text-4xl font-bold">My Listings</h1>
+            {/* TODO: Check if user has listed NFTs */}
+            <p>You haven't listed any NFTs!</p>
+            <div>
+                <Link to="/create" className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">List a Rental</Link>
+            </div>
+        </div>
+    );
+}
+
+const MyRentalsView = () => {
+    return (
+        <div className="m-20 space-y-6">
+            <h1 className="text-4xl font-bold">My Rentals</h1>
+            {/* TODO: Check if user has rented NFTs */}
+            <p>You haven't rented any NFTs!</p>
+            <div>
+                <Link to="/find" className="bg-indigo-800 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">Explore Current Rentals!</Link>
+            </div>
+        </div>
+    );
+}
+
+export default Rentals;
\ No newline at end of file