Skip to content
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

Merged
merged 16 commits into from
Oct 29, 2024
Merged

Conversation

DiogoSoaress
Copy link
Member

@DiogoSoaress DiogoSoaress commented Aug 28, 2024

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

@DiogoSoaress DiogoSoaress changed the base branch from wallet-landing-page to wallet-networks-slider August 28, 2024 13:11
Copy link

github-actions bot commented Aug 28, 2024

Branch preview

✅ Deployed successfully in branch deployment:

https://wallet_big_cards--homepage.review.5afe.dev

@DiogoSoaress DiogoSoaress changed the base branch from wallet-networks-slider to wallet-landing-page October 28, 2024 11:36
@DiogoSoaress DiogoSoaress changed the base branch from wallet-landing-page to wallet-networks-slider October 28, 2024 11:37
@DiogoSoaress DiogoSoaress changed the base branch from wallet-networks-slider to wallet-landing-page October 28, 2024 11:49
const BigCardsGrid = ({ items }: { items: Array<BaseBlock['items'] & { component: string }> }) => (
<Container className={layoutCss.containerShort}>
<Grid container spacing={{ xs: '30px', xl: '50px' }}>
{items?.map((item, index) => {
Copy link
Member

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?

Copy link
Member Author

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}`, () => <></>)
Copy link
Member

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?

Suggested change
const CardComponent = getComponentByName(`${component}`, () => <></>)
const CardComponent = getComponentByName(component, () => <></>)

Copy link
Member Author

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?

Copy link
Member

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.

@DiogoSoaress DiogoSoaress merged commit a1b6ecb into wallet-landing-page Oct 29, 2024
4 checks passed
@DiogoSoaress DiogoSoaress deleted the wallet-big-cards branch October 29, 2024 10:03
@github-actions github-actions bot locked and limited conversation to collaborators Oct 29, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants