added styling

Author: ProgrammerDATCH

src/components/product/SingleProduct.tsx

@@ -8,6 +8,8 @@ import { useAppDispatch, useAppSelector } from '../../store/store';
 import { fetchSingleProduct } from '../../store/features/product/singleProductSlice';
 import { PuffLoader } from 'react-spinners';
 import { IProductInitialResponse } from '../../utils/types/store';
+import { Meta } from '../Meta';
+import { Link } from 'react-router-dom';
 
 const ProductComponent = ({ productId }: { productId: string }) => {
     const dispatch = useAppDispatch();
@@ -19,13 +21,15 @@ const ProductComponent = ({ productId }: { productId: string }) => {
 
     return (
         <>
+            <Meta title={`Product details - ${productId}`} />
             {isLoading ? (
                 <div className="loader">
                     <PuffLoader color="#ff6d18" size={300} loading={isLoading} />
                 </div>
             ) : isError ? (
                 <div className="error-message">
                     <p>{message || "Something went wrong. Please try again later."}</p>
+                    <Link to="/" className="btn-link">View all products</Link>
                 </div>
             ) : (
                 product ?
@@ -40,7 +44,10 @@ const ProductComponent = ({ productId }: { productId: string }) => {
 
                     </div>
                     :
-                    <div>No Product</div>
+                    <div className='error-message'>
+                            <p>Product was not found</p>
+                            <Link to="/" className="btn-link">View all products</Link>
+                    </div>
             )
             }
         </>

src/styles/ProductComponent.scss

@@ -2,7 +2,8 @@
 
 .product-component {
     padding: 2rem;
-    *{
+
+    * {
         font-size: 16px;
     }
 
@@ -328,28 +329,76 @@
 
 }
 
+.loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60vh;
+    width: 100%;
+}
+
+.error-message {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 60vh;
+
+    p {
+        font-size: 20px;
+        color: $red-color;
+    }
+
+    .btn-link {
+        border: none;
+        background-color: $primary-color;
+        padding: 1rem 4rem;
+        text-decoration: none;
+        color: $white-color;
+        font-family: $text-family;
+        font-weight: 700;
+        font-size: 1.2rem;
+        border-radius: 2rem;
+        cursor: pointer;
+    }
+
+    .btn-link:hover {
+        background-color: $white-color;
+        color: $primary-color;
+        border: 1px solid $border-color;
+        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+        transition: all 0.3s ease-in-out;
+    }
+}
+
 @media (max-width: 600px) {
     .product-component {
-        *{
+        * {
             font-size: 12px;
         }
+
         .product-container {
             flex-direction: column;
             padding-bottom: 20px;
-            .images-container{
+
+            .images-container {
                 max-height: 300px;
                 min-height: 300px;
                 overflow: hidden;
-                .main-image-container{
-                    .main-image{
+
+                .main-image-container {
+                    .main-image {
                         height: 100%;
                     }
                 }
             }
         }
-        .card-container{
-            .card-header{
-                .card-header-title{
+
+        .card-container {
+            .card-header {
+                .card-header-title {
                     font-size: 5px;
                 }
             }