Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Jul 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/product/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,3 +151,4 @@
background: #06824d !important;
color: #fff !important;
}

160 changes: 9 additions & 151 deletions src/components/search/SearchResults.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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) => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reason behind removing all these code? contains icons like star and favorite that you removed as well

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @dinxsh basically it was a design of a card component but we already have designed one product component so we should use this component so that there is uniformity among cards

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want I could comment them but they are not needed any more

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey @dinxsh can you please review this

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah alright, could you just add that heart icon back then? @nishant0708

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay i will

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey @dinxsh i checked
image
there is already heart icon present so i guess we dont need to add another one

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok seems good

<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>
);
};
Expand Down
16 changes: 16 additions & 0 deletions src/components/search/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}