From 5ffedb68d67a1a60177861d0897341ab10741558 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 14 Aug 2024 11:20:48 +0200
Subject: [PATCH] refactor: rename Files to StickySideColumns and update css

---
 ...odule.scss => StickySideColumns.module.scss} |  5 +++++
 .../{Files.tsx => StickySideColumns.tsx}        | 17 +++++++----------
 2 files changed, 12 insertions(+), 10 deletions(-)
 rename src/layouts/{Files.module.scss => StickySideColumns.module.scss} (84%)
 rename src/layouts/{Files.tsx => StickySideColumns.tsx} (58%)

diff --git a/src/layouts/Files.module.scss b/src/layouts/StickySideColumns.module.scss
similarity index 84%
rename from src/layouts/Files.module.scss
rename to src/layouts/StickySideColumns.module.scss
index bda18dc..63c4314 100644
--- a/src/layouts/Files.module.scss
+++ b/src/layouts/StickySideColumns.module.scss
@@ -22,3 +22,8 @@
   flex-direction: column;
   grid-gap: 15px;
 }
+.content {
+  max-width: 550px;
+  width: 100%;
+  margin: 0 auto;
+}
diff --git a/src/layouts/Files.tsx b/src/layouts/StickySideColumns.tsx
similarity index 58%
rename from src/layouts/Files.tsx
rename to src/layouts/StickySideColumns.tsx
index a494293..1ada87f 100644
--- a/src/layouts/Files.tsx
+++ b/src/layouts/StickySideColumns.tsx
@@ -1,29 +1,26 @@
 import { PropsWithChildren, ReactNode } from 'react'
 
-import styles from './Files.module.scss'
+import styles from './StickySideColumns.module.scss'
 
-interface FilesProps {
-  left: ReactNode
-  right: ReactNode
-  content: ReactNode
+interface StickySideColumnsProps {
+  left?: ReactNode
+  right?: ReactNode
 }
 
-export const Files = ({
+export const StickySideColumns = ({
   left,
   right,
-  content,
   children
-}: PropsWithChildren<FilesProps>) => {
+}: PropsWithChildren<StickySideColumnsProps>) => {
   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.content}>{children}</div>
       <div className={styles.sidesWrap}>
         <div className={styles.sides}>{right}</div>
       </div>
-      {children}
     </div>
   )
 }