Merge pull request #465 from nishant0708/search-card

[Feature Request]: Want to Fix Card Design when we search products And ITS WORKING AS WELL #448

src/components/product/style.css

@@ -151,3 +151,4 @@
   background: #06824d !important;
   color: #fff !important;
 }
+

src/components/search/SearchResults.jsx

@@ -12,9 +12,9 @@ import {
   Rating,
   IconButton
 } from '@mui/material';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import StarIcon from '@mui/icons-material/Star';
 import useFetchData from '../../useFetchData';
+import Product from '../product';
+import './style.css'
 
 const SearchResults = () => {
   const location = useLocation();
@@ -47,162 +47,20 @@ const SearchResults = () => {
   );
 
   return (
-    <Container sx={{ marginTop: 10, marginBottom: 10 }} maxWidth="xl">
-      <Grid container spacing={4}>
+    <Container className='searchbox_conatiner' >
+      <div className='searchbox'>
         {filteredProducts.length > 0 ? (
-          filteredProducts.map((product) => (
-            <Grid item key={product.id} xs={12} sm={6} md={4}>
-              <Card
-                sx={{
-                  height: '100%',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  transition: 'transform 0.3s, box-shadow 0.3s',
-                  position: 'relative', // Add this for positioning the heart icon
-                  '&:hover': {
-                    transform: 'translateY(-8px)',
-                    boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
-                    cursor: 'pointer'
-                  }
-                }}
-              >
-                <IconButton
-                  sx={{
-                    position: 'absolute',
-                    top: 8,
-                    right: 8,
-                    zIndex: 1,
-                    color: 'red'
-                  }}
-                >
-                  <FavoriteIcon />
-                </IconButton>
-                <CardMedia
-                  component="img"
-                  height="100%"
-                  image={product.productImages[0]}
-                  alt={product.productName}
-                  sx={{ objectFit: 'cover' }}
-                />
-                <CardContent sx={{ flexGrow: 1 }}>
-                  {/* Product Name */}
-                  <Typography
-                    gutterBottom
-                    variant="h6"
-                    component="div"
-                    sx={{
-                      transition: 'color 0.3s',
-                      '&:hover': {
-                        color: 'blue'
-                      }
-                    }}
-                  >
-                    {product.productName}
-                  </Typography>
-                  {/* Rating and Brand Name */}
-                  <Typography
-                    variant="body2"
-                    color="text.secondary"
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      marginBottom: '8px'
-                    }}
-                  >
-                    <Rating
-                      name="product-rating"
-                      value={product.rating}
-                      readOnly
-                      precision={0.5}
-                      emptyIcon={
-                        <StarIcon
-                          style={{ opacity: 0.55 }}
-                          fontSize="inherit"
-                        />
-                      }
-                    />
-                    <Typography
-                      sx={{
-                        marginLeft: '8px',
-                        fontWeight: 'bold',
-                        fontSize: '16px',
-                        backgroundColor: 'green', // Background color
-                        padding: '8px 30px',
-                        borderRadius: '4px',
-                        color: '#fff'
-                      }}
-                    >
-                      {product.brand}
-                    </Typography>
-                  </Typography>
-                  {/* Price, Old Price, Discount */}
-                  <Typography
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      marginTop: '8px'
-                    }}
-                  >
-                    <h1
-                      style={{
-                        color: 'black',
-                        fontSize: '22px',
-                        fontWeight: 'bold',
-                        marginRight: '8px'
-                      }}
-                    >
-                      ₹{product.price}
-                    </h1>
-                    <Typography
-                      sx={{
-                        color: 'gray',
-                        fontSize: '22px',
-                        textDecoration: 'line-through',
-                        marginRight: '8px'
-                      }}
-                    >
-                      ₹{product.oldPrice}
-                    </Typography>
-                    <p
-                      style={{
-                        color: 'green',
-                        fontSize: '22px',
-                        letterSpacing: '-.2px',
-                        fontWeight: '500'
-                      }}
-                    >
-                      {product.discount}% off
-                    </p>
-                  </Typography>
-                  {/* Additional Info */}
-                  <p
-                    style={{
-                      color: 'black',
-                      fontSize: '18px',
-                      fontWeight: 700
-                    }}
-                  >
-                    Free delivery
-                  </p>
-                  <p
-                    style={{
-                      color: 'red',
-                      fontSize: '18px',
-                      fontWeight: 700
-                    }}
-                  >
-                    Only Few Left
-                  </p>
-                </CardContent>
-              </Card>
-            </Grid>
+          filteredProducts.map((product,index) => (
+            <div className="item" key={index}>
+                      <Product tag={product.type} item={product} />
+                    </div>
           ))
         ) : (
           <Typography variant="body1" component="p">
             No results found
           </Typography>
         )}
-      </Grid>
+      </div>
     </Container>
   );
 };

src/components/search/style.css

@@ -0,0 +1,16 @@
+.searchbox{
+    background-color: #f0fffae8;
+    display: flex;
+    padding: 30px 0px;
+    margin: 24px;
+    gap: 20px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+.searchbox .item{
+    width: 20%;
+    max-width: 25%;
+}
+.searchbox_conatiner{
+    max-width: none !important;
+}