Submitted 5 months ago

Article Preview Component - Next.js/Tailwind/TypeScript

Nick•170

@nickabate

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

JaceLee•240

@jaceleedevPosted 3 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!

Please log in to post a comment

Join 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