Separate props for good and bad images #28
Conversation
ghost
requested review from
| @@ -2,10 +2,11 @@ import React from 'react'; | |||
| import classes from '../components/Good.module.css'; | |||
|
|
|||
| export function Good(props) { | |||
There was a problem hiding this comment.
Perhaps Guideline can take an array of images which has the following structure:
{ src: "url-to-image.svg", alt: "alt text" }
Then it'd look something like this:
<Guideline title="Something" images={{ good: [ { src: "url-to-image.svg", alt: "alt text" } ], bad: [ { src: "url-to-image.svg", alt: "alt text" }, { src: "url-to-image.svg", alt: "alt text" } ] }}Then you can map through these and render them in the component.
src/components/Good.js
Outdated
| @@ -2,10 +2,11 @@ import React from 'react'; | |||
| import classes from '../components/Good.module.css'; | |||
|
|
|||
| export function Good(props) { | |||
| const{className, ...rest} = props | |||
There was a problem hiding this comment.
Missing formatting here. I would install prettier in your IDE to auto-format things like these. Super convenient!
src/components/Guideline.js
Outdated
| {goodImage && <Good className="mb-16" > | ||
| <img src={`./figma/${goodImage}`} alt="" /> | ||
| </Good> } | ||
| {badImage && <Bad> | ||
| <img src={`./figma/${badImage}`} alt="" /> | ||
| </Bad> } |
There was a problem hiding this comment.
Here you would access the prop and do something like props.images.good.map(..) to map through and render the images within the appropriate container. Keep in mind that if you do this, you'd have to update this change for every existing instance of this component.
Merging main into guideline proposal
Refactured Select to support multiple images ☀️
| // className={`${classes.good} relative border-solid border-0 border-l-4 border-green-500 bg-gray-100 p-5 rounded-r flex align-middle justify-center`} | ||
| // {...props} |
There was a problem hiding this comment.
Probably can remove this I guess?
Should we just use a separate prop for good and bad images? A guideline can have more than one image, right?
If you guys think it's good idea, I can go trough and update all the MDX-files 😇
Or should we set up something so that we can have multiple good and bad images? 🤔