Adds zero-state UI for My Rentals

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>

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>

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;