new product functionality added in admin route

Author: murtazatankiwala456

data.json

@@ -27,8 +27,9 @@ import { fetchLoggedInUserAsync } from "./features/user/userSlice";
 import LogOut from "./features/auth/components/LogOut";
 import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 import ProtectedAdmin from "./features/auth/components/ProtectedAdmin";
-import AdminHome from "./pages/AdimHome";
+import AdminHome from "./pages/AdminHome";
 import AdminProductDetail from "./features/admin/components/AdminProductDetail";
+import ProductFormPage from "./pages/ProductFormPage";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -88,6 +89,14 @@ const router = createBrowserRouter([
       </ProtectedAdmin>
     ),
   },
+  {
+    path: "/admin/product-form",
+    element: (
+      <ProtectedAdmin>
+        <ProductFormPage></ProductFormPage>
+      </ProtectedAdmin>
+    ),
+  },
   {
     path: "/order-success/:id",
     element: <OrderSuccessPage></OrderSuccessPage>,

src/App.js

@@ -199,6 +199,12 @@ export default function AdminProductList() {
               {/* Product grid */}
               <div className="lg:col-span-3">
                 {/* This is our products list  */}
+                <Link
+                  to="/admin/product-form"
+                  className="rounded-md mx-10 bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  Add Product
+                </Link>
                 <ProductGrid products={products} />
               </div>
               {/* Product grid end */}
@@ -399,42 +405,58 @@ function ProductGrid({ products }) {
       <div className="mx-auto max-w-2xl px-4 py-0 sm:px-6 sm:py-0 lg:max-w-7xl lg:px-8">
         <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
           {products.map((product) => (
-            <Link to={`/product-detail/${product.id}`}>
-              <div key={product.id} className="group relative p-2  border-2">
-                <div className="min-h-60 aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-60">
-                  <img
-                    src={product.thumbnail}
-                    alt={product.title}
-                    className="h-full w-full object-cover object-center lg:h-full lg:w-full"
-                  />
-                </div>
-                <div className="mt-4 flex justify-between">
-                  <div>
-                    <h3 className="text-sm text-gray-700">
-                      <div href={product.thumbnail}>
-                        <span aria-hidden="true" className="absolute inset-0" />
-                        {product.title}
+            <div>
+              <Link to={`/product-detail/${product.id}`}>
+                <div>
+                  <div
+                    key={product.id}
+                    className="group relative p-2  border-2"
+                  >
+                    <div className="min-h-60 aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-60">
+                      <img
+                        src={product.thumbnail}
+                        alt={product.title}
+                        className="h-full w-full object-cover object-center lg:h-full lg:w-full"
+                      />
+                    </div>
+                    <div className="mt-4 flex justify-between">
+                      <div>
+                        <h3 className="text-sm text-gray-700">
+                          <div href={product.thumbnail}>
+                            <span
+                              aria-hidden="true"
+                              className="absolute inset-0"
+                            />
+                            {product.title}
+                          </div>
+                        </h3>
+                        <p className="mt-1 text-sm text-gray-500">
+                          <StarIcon className="w-6 h-6 inline"></StarIcon>
+                          <span className="align-bottom">{product.rating}</span>
+                        </p>
                       </div>
-                    </h3>
-                    <p className="mt-1 text-sm text-gray-500">
-                      <StarIcon className="w-6 h-6 inline"></StarIcon>
-                      <span className="align-bottom">{product.rating}</span>
-                    </p>
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-gray-900">
-                      $
-                      {Math.round(
-                        product.price * (1 - product.discountPercentage / 100)
-                      )}
-                      <p className="text-sm line-through font-medium text-gray-400">
-                        ${product.price}
-                      </p>
-                    </p>
+                      <div>
+                        <p className="text-sm font-medium text-gray-900">
+                          $
+                          {Math.round(
+                            product.price *
+                              (1 - product.discountPercentage / 100)
+                          )}
+                          <p className="text-sm line-through font-medium text-gray-400">
+                            ${product.price}
+                          </p>
+                        </p>
+                      </div>
+                    </div>
                   </div>
                 </div>
+              </Link>
+              <div>
+                <button className="rounded-md my-2 bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                  Edit Product
+                </button>
               </div>
-            </Link>
+            </div>
           ))}
         </div>
       </div>