Design comparison
Solution retrospective
Was able to replicate the page functionality smoothly through modifying state.
What challenges did you encounter, and how did you overcome them?Some issues and a bit of trial and error with the Next Image component, and was unable to change the share icon svg fill color in mobile on active state.
What specific areas of your project would you like help with?Any recommendations on using Next Image component effectively. Thanks!
Community feedback
- @jaceleedevPosted 4 months ago
Hi, you worked hard to complete the challenge! After checking the functionality on your site and reviewing the code, I noticed that the SVG isn't changing properly. To control the SVG as you want, it's better to use the SVG code directly like this:
interface ShareIconProp { fill: string; } function ShareIcon({ fill }: Readonly<ShareIconProp>) { return ( <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"> <path fill={fill} d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" /> </svg> ); } export default ShareIcon;
In my case, I imported the SVG code directly and used it as a component. For Facebook, Twitter, and Pinterest icons, I didn't need to go this far, but if necessary, I would have created them in a similar way.
Happy coding!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord