Requests page

src/App.jsx

@@ -7,6 +7,7 @@ import NearByRestaurants from "./pages/NearByRestaurants";
 import RestaurantDashBoard from "./pages/RestaurantDashboard";
 import RestaurantInventory from "./pages/RestaurantInventory";
 import Layout from "./Layout";
+import Requests from "./pages/FoodRequests";
 
 function App() {
   return (
@@ -23,6 +24,7 @@ function App() {
       <Route path="/restaurant-dashboard/*" element={<Layout />}>
         <Route index element={<RestaurantDashBoard />}></Route>
         <Route path="inventory" element={<RestaurantInventory />}></Route>
+        <Route path="requests" element={<Requests />}></Route>
       </Route>
     </Routes>
   );

src/components/FoodRequestCard.jsx

@@ -0,0 +1,48 @@
+function RequestCard() {
+    return (
+      <div className="w-96 border flex flex-col gap-6 py-4">
+        <div>
+          <div className="flex h-8 justify-between items-center px-12">
+            <span className="flex items-center">Arpan Gupta</span>
+            <div className="border bg-gray-300 h-5/6"></div>
+            <span className="flex items-center">9864646464</span>
+          </div>
+          <div className="border border-gray w-5/6 m-auto"></div>
+        </div>
+        <div className="flex justify-between px-14 text-sm">
+          <div className="flex flex-col gap-2">
+            <span>Requested</span>
+            <div>
+              <ul className="flex items-center flex-col">
+                <li>Juice</li>
+                <li>Bread</li>
+                <li>Burger</li>
+              </ul>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <span>Quantity</span>
+            <div>
+              <ul className="flex items-center flex-col">
+                <li>02</li>
+                <li>01</li>
+                <li>03</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div className="flex">
+          <div className="flex gap-10 m-auto">
+            <button className="bg-editButton rounded h-10 w-20 text-sm">
+              Accept
+            </button>
+            <button className="bg-deleteButton rounded text-sm h-10 w-20">
+              Decline
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+}
+
+export default RequestCard;

src/pages/FoodRequests.jsx

@@ -0,0 +1,42 @@
+import user from "../assets/images/user.jpeg";
+import bell from "../assets/icons/bell.png";
+import { FaSearch } from "react-icons/fa";
+import RequestCard from "../components/FoodRequestCard";
+function Requests() {
+  return (
+    <div className="flex w-full h-full flex-col gap-10">
+      <div className="h-16 w-full border flex gap-6 items-center justify-between">
+        <div className="flex ml-6 items-center gap-3">
+          <FaSearch />
+          <input
+            className="focus:outline-none"
+            type="text"
+            placeholder="Search"
+          />
+        </div>
+        <div className="flex items-center mr-6 gap-6">
+          <img className="h-6 w-6" src={bell} alt="dashboard-icon" />
+          <div className="flex items-center gap-2">
+            <img className="w-10 h-10" src={user} alt="user-img" />
+            <h2>Tom Hook</h2>
+          </div>
+        </div>
+      </div>
+      <div className="h-5/6 w-full flex flex-col gap-16 border rounded-sm py-2 px-10">
+        <div className="flex gap-10 flex-wrap h-full overflow-y-auto ">
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+          <RequestCard />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Requests;