mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-01-20 16:30:34 +00:00
feat: update layout to page wrapper component
This commit is contained in:
parent
0ef48a52a0
commit
690346c934
@ -1,32 +0,0 @@
|
||||
import { ReactNode } from 'react'
|
||||
import './layout.css'
|
||||
|
||||
type LeftProps = {
|
||||
breadcrumbBar?: ReactNode
|
||||
content: ReactNode
|
||||
rightImageSrc?: string
|
||||
}
|
||||
|
||||
function LayoutComponent(props: LeftProps) {
|
||||
return (
|
||||
<div className="layout">
|
||||
<section className="layout-left">
|
||||
{props.breadcrumbBar}
|
||||
<div className="container">{props.content}</div>
|
||||
</section>
|
||||
<LayoutRight rightImageSrc={props.rightImageSrc} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LayoutRight({ rightImageSrc }: { rightImageSrc?: string }) {
|
||||
return (
|
||||
<section className="layout-right">
|
||||
<div className="image-container">
|
||||
<img src={rightImageSrc} alt="background" />
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutComponent
|
26
src/components/PageWrapperShadow.tsx
Normal file
26
src/components/PageWrapperShadow.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { ReactNode } from 'react'
|
||||
import './layout.css'
|
||||
|
||||
type PageWrapperShadowProps = {
|
||||
breadcrumbBar?: ReactNode
|
||||
content: ReactNode
|
||||
rightImageSrc?: string
|
||||
}
|
||||
|
||||
const PageWrapperShadow = ({ breadcrumbBar, content, rightImageSrc }: PageWrapperShadowProps) => {
|
||||
return (
|
||||
<div className="layout">
|
||||
<section className="layout-left">
|
||||
{breadcrumbBar}
|
||||
<div className="container">{content}</div>
|
||||
</section>
|
||||
<section className="layout-right">
|
||||
<div className="image-container">
|
||||
<img src={rightImageSrc} alt="background" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PageWrapperShadow
|
Loading…
x
Reference in New Issue
Block a user