From dfe67b99ad7d80b1ab7c3d41bd5f5281d1fc1f5e Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 13 Aug 2024 17:27:08 +0200
Subject: [PATCH] feat: add sticky layout with slots

---
 src/layouts/Files.module.scss | 24 ++++++++++++++++++++++++
 src/layouts/Files.tsx         | 29 +++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 src/layouts/Files.module.scss
 create mode 100644 src/layouts/Files.tsx

diff --git a/src/layouts/Files.module.scss b/src/layouts/Files.module.scss
new file mode 100644
index 0000000..bda18dc
--- /dev/null
+++ b/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;
+}
diff --git a/src/layouts/Files.tsx b/src/layouts/Files.tsx
new file mode 100644
index 0000000..a494293
--- /dev/null
+++ b/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>
+  )
+}