feat: create PageLayout two-column component
This commit is contained in:
@@ -0,0 +1,2 @@
|
|||||||
|
export { PageLayout } from './page-layout'
|
||||||
|
export type { PageLayoutProps } from './page-layout'
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
.page-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 300px 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout__left {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout__right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout__header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout__title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout__sticky {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background: white;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout__content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import './page-layout.scss'
|
||||||
|
|
||||||
|
export interface PageLayoutProps {
|
||||||
|
headerLeft?: React.ReactNode
|
||||||
|
title?: React.ReactNode
|
||||||
|
contentLeft?: React.ReactNode
|
||||||
|
stickyContent?: React.ReactNode
|
||||||
|
children: React.ReactNode
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PageLayout: React.FC<PageLayoutProps> = ({
|
||||||
|
headerLeft,
|
||||||
|
title,
|
||||||
|
contentLeft,
|
||||||
|
stickyContent,
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={`page-layout ${className || ''}`}>
|
||||||
|
<div className="page-layout__left">
|
||||||
|
{contentLeft}
|
||||||
|
</div>
|
||||||
|
<div className="page-layout__right">
|
||||||
|
{headerLeft && <div className="page-layout__header">{headerLeft}</div>}
|
||||||
|
{title && <div className="page-layout__title">{title}</div>}
|
||||||
|
{stickyContent && <div className="page-layout__sticky">{stickyContent}</div>}
|
||||||
|
<div className="page-layout__content">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user