Mitra/Reusable hero banner #4135
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deriv-com-git-fork-mitra-deriv-reusable-hero-banner.binary.sx/ |
|
Kudos, SonarCloud Quality Gate passed!
|
There was a problem hiding this comment.
@mitra-deriv Just a suggestion, instead of derivez-logo.svg, It's better to have the icon and the text logo as separate files, So later in the code, if needed we can use them separately or put them together with the code, So we won’t need to add a new asset again in the future if we need the logo.
| type TProps = { | ||
| color?: string | ||
| angle?: number | ||
| src?: string |
There was a problem hiding this comment.
@mitra-deriv src is not used anywhere, It's only in the type, Maybe we can remove it? 🤔
| color?: string | ||
| angle?: number | ||
| src?: string | ||
| children?: ReactNode |
There was a problem hiding this comment.
| children?: ReactNode |
@mitra-deriv Instead use React.PropsWithChildren generic.
| ` | ||
| const ShapeStyle = styled.div<Pick<TProps, 'angle'>>` |
There was a problem hiding this comment.
| ` | |
| const ShapeStyle = styled.div<Pick<TProps, 'angle'>>` | |
| ` | |
| const ShapeStyle = styled.div<Pick<TProps, 'angle'>>` |
| ` | ||
| const BackgroundStyle = styled.div<Pick<TProps, 'color'>>` |
There was a problem hiding this comment.
| ` | |
| const BackgroundStyle = styled.div<Pick<TProps, 'color'>>` | |
| ` | |
| const BackgroundStyle = styled.div<Pick<TProps, 'color'>>` |
Just some spacing between variables for better readability 🙇🏻
| return ( | ||
| <ContainerStyle> | ||
| <ShapeStyle angle={angle}> | ||
| <BackgroundStyle color={color}></BackgroundStyle> |
There was a problem hiding this comment.
| <BackgroundStyle color={color}></BackgroundStyle> | |
| <BackgroundStyle color={color} /> |
| ` | ||
| const ContentWrapperStyle = styled.div` |
There was a problem hiding this comment.
| ` | |
| const ContentWrapperStyle = styled.div` | |
| ` | |
| const ContentWrapperStyle = styled.div` |
| ` | ||
| const HeroImageWrapper = styled.div` |
There was a problem hiding this comment.
| ` | |
| const HeroImageWrapper = styled.div` | |
| ` | |
| const HeroImageWrapper = styled.div` |
| } | ||
| ` | ||
|
|
||
| const Hero = () => { |
There was a problem hiding this comment.
| const Hero = () => { | |
| const Hero: React.FC = () => { |
| const { is_mobile } = useBreakpoints() | ||
| return ( |
There was a problem hiding this comment.
| const { is_mobile } = useBreakpoints() | |
| return ( | |
| const { is_mobile } = useBreakpoints() | |
| return ( |
| <BackgroundStyle> | ||
| <ContentWrapperStyle> | ||
| <Content> | ||
| <img width="237px" height="64px" src={DerivEZLogo} /> |
There was a problem hiding this comment.
@mitra-deriv Maybe we can create a reusable component for platform logos since they will be used in many places, As I mentioned in the assets we can have the logo and text logo separately, and then in this component, you can put them together, and use it everywhere, Something like the following:
type TProps = {
platform: 'deriv_ez' | 'deriv_go' | 'deriv_p2p' | ...
visibility?: 'both' | 'icon' | 'text'
size?: 'small' | 'medium' | 'large'
}
const PlatformLogo: React.FC<TProps> = ({ platform, visibility = 'both', size = 'medium' }) => ...
<PlatformLogo platform="deriv_ez" />
<PlatformLogo platform="deriv_p2p" visibility="icon" />
<PlatformLogo platform="deriv_go" visibility="text" size="large" />There was a problem hiding this comment.
@farzin-deriv Thanks for the time and Reviewing the PR , I will resolve them in another branch and mark the conversations as resolved once it is done 🙏 🌹
About the platforms logos just to be sure I got your point correctly, You mean we create a component which accepts the icon (the red one) + text (which here is deriv ez ) ?
There was a problem hiding this comment.
Not accepting icon and text as props, The component will handle it internally. Let's have a talk when you have time so I can explain it 🙇🏻
Changes:
Co-authored-by: @farzin-deriv
Type of change