feat: create PageLayout two-column component

2026-04-05 20:51:09 +03:00
parent d8d2de43eb
commit 12c2b36051
3 changed files with 83 additions and 0 deletions
@@ -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>
+  )
+}