-
Notifications
You must be signed in to change notification settings - Fork 14
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
feat(Wallet): Big cards grid #448
Conversation
… the current version
Branch preview✅ Deployed successfully in branch deployment: |
9866499
to
4947625
Compare
const BigCardsGrid = ({ items }: { items: Array<BaseBlock['items'] & { component: string }> }) => ( | ||
<Container className={layoutCss.containerShort}> | ||
<Grid container spacing={{ xs: '30px', xl: '50px' }}> | ||
{items?.map((item, index) => { |
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.
If there are no items, this will still render the Container
. Is this expected?
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.
The content is static so I think this can't really become an issue but I made it render conditionally nevertheless. Thanks for the catch.
{items?.map((item, index) => { | ||
const { component } = item | ||
|
||
const CardComponent = getComponentByName(`${component}`, () => <></>) |
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.
Do we want to fallback to an "empty" component?
const CardComponent = getComponentByName(`${component}`, () => <></>) | |
const CardComponent = getComponentByName(component, () => <></>) |
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.
I think it's a suitable fallback. Do you have any other suggestion?
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.
I'm not sure - I'll leave it up to you.
What it solves
Implements the Big Cards grid section of the Wallet landing page
Figma
https://www.figma.com/design/qtXXlwdslAze6yNbLLzIRa/Website-redesign-2.0?node-id=15367-15363&t=UyEbY16dBeLFg4eE-0
Obs: please disregard the commit history if possible. The PR has been open for a while and it was branched of a WIP branch