-
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: create colony cards for landing page #3425
base: feat/landing-page
Are you sure you want to change the base?
Conversation
strzelec seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account. You have signed the CLA already but the status is still pending? Let us recheck it. |
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.
Nice start on this, design wise stuff is looking quite on point 👌
However, I think we could benefit from some more splitting of components according to what they do, I've left a comment regarding that, feel free to reach out if I wasn't clear enough!
But essentially, I think we shouldn't have all of our new components receive a loading flag and render everything wrapped in LoadingSkeleton
components.
It would be much more concise and readable to handle loading in a different component
import Button from '~v5/shared/Button/Button.tsx'; | ||
|
||
export interface ColonyCardProps { | ||
colonyName?: string; |
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 all of the conditional rendering we're doing with skeletons and handling the create new colony function is putting way too many things into this component.
I would recommend the following steps to make this more sustainable:
- Create 2 new components, a
ColonyCard
andCreateNewColonyCard
- Instead of having all the props optional because the app may be loading, I would recommend creating a file structure something like this:
ColonyCardHandler
is a component which gets the colony and the loading state, if the app is loading it rendersColonyCardSkeleton
, if we have all the necessary data, we renderColonyCard
with all the props sent in defined and not nullable- then the same for
CreateColonyCard
(can this one even be impacted by anything loading?)
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.
@bassgeta Ok, I will add ColonyCardHandler
when I start creating logic for Landing page
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.
Nice work so far on this one @adam-strzelec 👏
All 3 scenarios for the cards look good, but please check @bassgeta and my comments for refactoring the ColonyCard
component as it will make it easier to maintain and add more types of cards in the future
</p> | ||
) : ( | ||
<Button icon={Plus} onClick={onCreate}> | ||
Create |
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.
Please extract this into a MessageDescriptor
and then use here formatText(MSG.createColony)
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.
Given we have multiple scenarios for the ColonyCard
, namely the loading state, creating a colony and active colony, we should definitely create multiple instances of the ColonyCard
and use them accordingly: LoadingColonyCard
, CreateColonyCard
and ActiveColonyCard
- the last two could instantiate a BaseColonyCard
which could have the following implementation
interface BaseColonyCardProps extends PropsWithChildren {
isClickable?: boolean
}
const BaseColonyCard: FC<BaseColonyCardProps> = ({ children, isClickable }) => {
return (
<div
className={clsx(
'flex h-[4.5rem] items-center gap-[.875rem] rounded border px-5 py-4 transition-colors duration-normal hover:border-gray-900',
{
'cursor-pointer': isClickable,
},
)}
>
{children}
</div>
)
}
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.
Lightspeed turnaround here, much appreciated 👌
All the components look good, and my oh my this composition is truly sweet to look at, really great job!
The only reason I'm requesting changes is because I would like to see us pulling all the i18n strings into the components that use them, for example
After this is resolved, I will happily approve this :D
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.
🔥 looking good, thanks for the changes and bringing the landing page one step closer towards completion!
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.
Way more composable implementation of these cards 🙌 thanks so much for your fast changes @adam-strzelec 💯
Everything looks nice and will approve your PR 👍
However a question is popping in my mind if it wouldn't be better to structure all these variants under a single storybook Story
as in the end they should only represent a variant of a component?
Description
Create colony cards in all variants for landing page
Testing
Colony Card
,Create New Colony Card
,Colony Card Skeleton
Diffs
New stuff ✨
Main issue - #3392