-
Notifications
You must be signed in to change notification settings - Fork 159
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.
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
Add product gallery + basic CSS styling #246
base: master
Are you sure you want to change the base?
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,6 +5,33 @@ import { graphcms } from '../../../lib/_graphcms'; | |
|
||
const limit = 1; | ||
|
||
const singleProductStyle = { | ||
display: 'flex', | ||
flexDirection: 'column', | ||
width: '200px', | ||
margin: '10px', | ||
color: '#000', | ||
}; | ||
|
||
function SingleProduct({product}) { | ||
const { image } = product; | ||
return ( | ||
<div style={singleProductStyle} key={product.id}> | ||
<img src={image.url} width={200} height={200} alt={product.name} title={product.name} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's not recommended you use However, I would not show an image at all here. We have an example for that. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @notrab we're using Next.js 9 on this project and There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's not really relevant though. We should aim to keep these updated regardless. |
||
<h3>{product.name}</h3> | ||
</div> | ||
) | ||
} | ||
|
||
const navStyle = { | ||
display: 'inline-block', | ||
backgroundColor: '#ccc', | ||
color: '#111', | ||
textDecoration: 'none', | ||
padding: '2px 6px', | ||
marginRight: '5px', | ||
} | ||
|
||
function ProductPage({ | ||
currentPageNumber, | ||
hasNextPage, | ||
|
@@ -13,15 +40,19 @@ function ProductPage({ | |
}) { | ||
return ( | ||
<React.Fragment> | ||
<pre>{JSON.stringify(products, 2, null)}</pre> | ||
<Link href={'/'}> | ||
<a>Home</a> | ||
</Link> | ||
<p>Page {currentPageNumber}</p> | ||
<SingleProduct product={products[0].node} /> | ||
{hasPreviousPage ? ( | ||
<Link href={`/products/${currentPageNumber - 1}`}> | ||
<a>Previous page</a> | ||
<a style={navStyle}>Previous page</a> | ||
</Link> | ||
) : null} | ||
{hasNextPage ? ( | ||
<Link href={`/products/${currentPageNumber + 1}`}> | ||
<a>Next page</a> | ||
<a style={navStyle}>Next page</a> | ||
</Link> | ||
) : null} | ||
</React.Fragment> | ||
|
@@ -75,6 +106,17 @@ export async function getStaticProps({ params }) { | |
node { | ||
id | ||
name | ||
image { | ||
id | ||
url(transformation: { | ||
image: { | ||
resize: { | ||
width: 200, | ||
height: 200 | ||
} | ||
} | ||
}) | ||
} | ||
} | ||
} | ||
pageInfo { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We want to improve styling for all our examples. I'm happy if you want to add these here, but FYI, these may get removed with an updated design when we get some design resources to help here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's definitely a thing! Do you already have basic styling from other example that I could use here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.