E-commerce website ReactJS

MuhammadHassanRaza25 · Oct 23, 2024 · 1828ade · 1828ade
1 parent 1493fc2
commit 1828ade
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 17 deletions.
diff --git a/src/App.css b/src/App.css
@@ -103,6 +103,7 @@ option{
 }
 .image img{
   width: 100%;
+  height: 40vh;
 }
 .desc{
   height: 12vh;
@@ -275,6 +276,26 @@ option{
     justify-content: center;
   }
 }
+/* admin panel responsiveness */
+@media(max-width:950px){
+  .adminDash{
+    display: flex !important;
+    flex-direction: column !important;
+  }
+  .adminContainer1{
+    display: flex !important;
+    width: 100% !important;
+    height: 62vh !important;
+  }
+  .adminContainer2{
+    display: flex !important;
+    width: 100% !important;
+    height: 50vh !important;
+  }
+  .adminBtn{
+    width: 99% !important;
+  }
+}
 @media(max-width:600px){
   .sliderImage{
     height: 30vh !important;

diff --git a/src/admin/AdminAllOrders.jsx b/src/admin/AdminAllOrders.jsx
@@ -46,8 +46,8 @@ function AdminAllOrders(){
               {/* Navbar End */}
 
             {/* Admin Panel Start */}
-             <div className="flex">
-                <div className="adminContainer1 flex flex-col pt-24 bg-white justify-start items-start w-96 h-[88vh]">
+             <div className="adminDash flex">
+                <div className="adminContainer2 flex flex-col pt-24 bg-white justify-start items-start w-96 h-[88vh]">
                   <Link to={'/admindashboard26'} className="w-full"><h1 className="adminHeading mb-10 pl-8 text-blue-800 bg-gray-50 flex items-center gap-4 px-3 py-2 w-full font-bold text-start text-xl"><BarChartOutlined className="text-2xl"/> Admin Dashboard</h1></Link>
                   <Link to={'/AdminAllProducts'} className="w-full"><button className="adminBtn pl-8 hover:bg-blue-50 hover:border-blue-50 hover:text-blue-700 flex items-center gap-4 focus:bg-blue-50 focus:text-blue-800 border-r-4 border-white focus:border-blue-700 px-3 py-2 w-full font-bold text-start text-xl mb-6"><ShoppingOutlined className="text-2xl"/> All Products</button></Link>
                   <Link to={'/AdminAllOrders'} className="w-full"><button className="adminBtn pl-8 hover:bg-blue-50 flex items-center gap-4 bg-blue-50 text-blue-800 border-r-4 border-blue-700 px-3 py-2 w-full font-bold text-start text-xl mb-6"><TruckOutlined className="text-2xl"/> All Orders</button></Link>
@@ -61,11 +61,11 @@ function AdminAllOrders(){
                             <div className="scrollbar drop-shadow-xl w-full bg-white h-[68vh] overflow-scroll">
 
                                 <div className="flex justify-between bg-blue-600 text-white font-bold p-3">
-                                    <h1 className="text-start w-full">Product Title</h1>
-                                    <h1 className="text-start w-96 pl-5">Price</h1>
-                                    <h1 className="text-start w-full">Category</h1>
-                                    <h1 className="text-start w-full">Return Policy</h1>
-                                    <h1 className="text-center w-full">Reject Order</h1>
+                                    <h1 className="scrollbar overflow-x-scroll text-start w-full">Product Title</h1>
+                                    <h1 className="scrollbar overflow-x-scroll text-start w-96 pl-5">Price</h1>
+                                    <h1 className="scrollbar overflow-x-scroll text-start w-full">Category</h1>
+                                    <h1 className="scrollbar overflow-x-scroll text-start w-full">Return Policy</h1>
+                                    <h1 className="scrollbar overflow-x-scroll text-center w-full">Reject Order</h1>
                                 </div>
 
                                 {ordersFromDb.map((data)=>{

diff --git a/src/admin/AdminAllProducts.jsx b/src/admin/AdminAllProducts.jsx
@@ -47,8 +47,8 @@ import { message } from "antd";
               {/* Navbar End */}
 
             {/* Admin Panel Start */}
-             <div className="flex">
-                <div className="adminContainer1 flex flex-col pt-24 bg-white justify-start items-start w-96 h-[88vh]">
+             <div className="adminDash flex">
+                <div className="adminContainer2 flex flex-col pt-24 bg-white justify-start items-start w-96 h-[88vh]">
                   <Link to={'/admindashboard26'} className="w-full"><h1 className="adminHeading mb-10 pl-8 text-blue-800 bg-gray-50 flex items-center gap-4 px-3 py-2 w-full font-bold text-start text-xl"><BarChartOutlined className="text-2xl"/> Admin Dashboard</h1></Link>
                   <Link to={'/AdminAllProducts'} className="w-full"><button className="adminBtn pl-8 hover:bg-blue-50 flex items-center gap-4 bg-blue-50 text-blue-800 border-r-4 border-blue-700 px-3 py-2 w-full font-bold text-start text-xl mb-6"><ShoppingOutlined className="text-2xl"/> All Products</button></Link>
                   <Link to={'/AdminAllOrders'} className="w-full"><button className="adminBtn pl-8 hover:bg-blue-50 hover:border-blue-50 hover:text-blue-700 flex items-center gap-4 focus:bg-blue-50 focus:text-blue-800 border-r-4 border-white focus:border-blue-700 px-3 py-2 w-full font-bold text-start text-xl mb-6"><TruckOutlined className="text-2xl"/> All Orders</button></Link>
@@ -61,11 +61,11 @@ import { message } from "antd";
                       <div className="scrollbar drop-shadow-xl w-full bg-white h-[68vh] overflow-scroll">
 
                            <div className="flex justify-between bg-blue-600 text-white font-bold p-3">
-                               <h1 className="text-start w-full">Product Title</h1>
-                               <h1 className="text-start w-96 pl-5">Price</h1>
-                               <h1 className="text-start w-full">Category</h1>
-                               <h1 className="text-start w-full">Return Policy</h1>
-                               <h1 className="text-center w-full">Delete Product</h1>
+                               <h1 className="scrollbar overflow-x-scroll text-start w-full">Product Title</h1>
+                               <h1 className="scrollbar overflow-x-scroll text-start w-96 pl-5">Price</h1>
+                               <h1 className="scrollbar overflow-x-scroll text-start w-full">Category</h1>
+                               <h1 className="scrollbar overflow-x-scroll text-start w-full">Return Policy</h1>
+                               <h1 className="scrollbar overflow-x-scroll text-center w-full">Delete Product</h1>
                            </div>
 
                            {productsFromDb.map((data)=>{

diff --git a/src/admin/AdminDashboard.jsx b/src/admin/AdminDashboard.jsx
@@ -90,6 +90,7 @@ const showModal = ()=>{
                 <select onChange={(e)=> setCategory(e.target.value)} className="mb-4 border-2 font-semibold rounded-lg focus:outline-none placeholder:text-gray-500 w-full p-3">
                    <option disabled selected>Select Cateory</option>
                    <option>Electronics</option>
+                   <option>Vehicles</option>
                    <option>Furniture</option>
                    <option>Watches</option>
                    <option>Baby Products</option>
@@ -140,7 +141,7 @@ const showModal = ()=>{
               {/* Navbar End */}
 
             {/* Admin Panel Start */}
-             <div className="flex">
+             <div className="adminDash flex">
                 <div className="adminContainer1 flex flex-col pt-24 bg-white justify-start items-start w-96 h-[88vh]">
                   <h1 className="adminHeading mb-10 pl-8 text-blue-800 bg-gray-50 flex items-center gap-4 px-3 py-2 w-full font-bold text-start text-xl"><BarChartOutlined className="text-2xl"/> Admin Dashboard</h1>
                   <Link to={'/AdminAllProducts'} className="w-full"><button className="adminBtn pl-8 hover:bg-blue-50 hover:border-blue-50 hover:text-blue-700 flex items-center gap-4 focus:bg-blue-50 focus:text-blue-800 border-r-4 border-white focus:border-blue-700 px-3 py-2 w-full font-bold text-start text-xl mb-6"><ShoppingOutlined className="text-2xl"/> All Products</button></Link>

diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx
@@ -15,8 +15,8 @@ const {user, setUser} = useContext(AuthContext);
 
    return (
    <div className="card max-w-sm bg-white border-2 border-gray-200 rounded-xl shadow dark:bg-gray-800 dark:border-gray-700">
-    <div className="image">
-        <img className="p-8 rounded-t-lg" src={props.images} alt="product image" />
+    <div className="image mb-5">
+        <img className="rounded-t-xl" src={props.images} alt="product image" />
    </div>
     <div className="px-5 pb-5">
         <h5 className="cardTitle text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{props.title}</h5>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -77,6 +77,7 @@ const {cartItems} = useContext(CartContext)
                 All Products
               </option>
               <option>Electronics</option>
+              <option>Vehicles</option>
               <option>Furniture</option>
               <option>Watches</option>
               <option>Baby Products</option>