src/layouts/Files.module.scss

@@ -0,0 +1,24 @@
+@import '../styles/colors.scss';
+@import '../styles/sizes.scss';
+
+.container {
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 30px;
+  flex-grow: 1;
+}
+
+.sidesWrap {
+  position: relative;
+}
+
+.sides {
+  position: sticky;
+  top: $header-height + $body-vertical-padding;
+}
+
+.files {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}

src/layouts/Files.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+import styles from './Files.module.scss'
+
+interface FilesProps {
+  left: ReactNode
+  right: ReactNode
+  content: ReactNode
+}
+
+export const Files = ({
+  left,
+  right,
+  content,
+  children
+}: PropsWithChildren<FilesProps>) => {
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.sidesWrap} ${styles.files}`}>
+        <div className={styles.sides}>{left}</div>
+      </div>
+      <div className={styles.content}>{content}</div>
+      <div className={styles.sidesWrap}>
+        <div className={styles.sides}>{right}</div>
+      </div>
+      {children}
+    </div>
+  )
+}