feat: add sticky layout with slots

This commit is contained in:
enes 2024-08-13 17:27:08 +02:00 committed by Eugene
parent 97c82718cb
commit dfe67b99ad
2 changed files with 53 additions and 0 deletions

View File

@ -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;
}

29
src/layouts/Files.tsx Normal file
View File

@ -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>
)
}