Feat/create typography components + nextjs image component #45
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/rtcamp/wp-decoupled/8bzphkrsj [Deployment for 02f6729 failed] |
pages/index.js
Outdated
| <NextImage | ||
| className="product-image" | ||
| src={item.image.sourceUrl} | ||
| alt={item.name} |
There was a problem hiding this comment.
Change to item?.image?.sourceUrl
pages/index.js
Outdated
| height="240" | ||
| /> | ||
| <h5 className="product-name">{item.name}</h5> | ||
| <Paragraph className="product-price">{item.price}</Paragraph> |
There was a problem hiding this comment.
Add optional chaining at all places
item?.price
| {userData.user.email ? <p>Email: {userData.user.email}</p> : ''} | ||
| {userData.user.email ? | ||
| <Paragraph>Email: {userData.user.email}</Paragraph> : '' | ||
| } |
There was a problem hiding this comment.
Use null instead of empty string
| src={item.image.sourceUrl} | ||
| srcSet={item.image.srcSet} | ||
| alt={item.image.title} | ||
| width="64" | ||
| height="64" |
There was a problem hiding this comment.
please add sizes attribute, else srcSet won't work
https://css-tricks.com/responsive-images-css/#sizes-in-css
| </a> | ||
| </Link> | ||
| </li> | ||
| <li className="product-category product last col-md-4"> | ||
| <Link as={`/`} href={`/`}> | ||
| <a className=""> | ||
| <img | ||
| <NextImage | ||
| src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg" | ||
| alt="Tshirts" | ||
| width="324" | ||
| height="324" | ||
| srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-768x768.jpg 768w" | ||
| sizes="(max-width: 324px) 100vw, 324px" |
There was a problem hiding this comment.
Lets not keep this hardcoded
Can we do queries for categories please and fetch?
If we plan to do it later, can we add a @todo and raise a Github issue please
| @@ -0,0 +1,20 @@ | |||
| export const Heading = (props) => { | |||
| const { className, children } = props; | |||
There was a problem hiding this comment.
Can we do an early return if children is not available 🔢
-Note: Add SITE_DOMAIN='YOUR_DOMAIN' in env file.