chore: 🧹some more clean-up

lib/components/PageLayout/PageLayout.scss

@@ -0,0 +1,25 @@
+.page-layout {
+    width: 100%;
+    display: flex;
+    gap: 1.5rem;
+    padding-top: 1.5rem;
+
+    @include mobile {
+        flex-direction: column;
+    }
+
+    &__left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__right {
+        display: flex;
+        flex-direction: column;
+    }
+}

lib/components/PageLayout/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useDevice } from '../../hooks/useDevice';
+import './PageLayout.scss';
+
+type PageLayoutProps = {
+    left?: JSX.Element;
+    right?: JSX.Element;
+};
+
+export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left, right}) => {
+    const {isMobile} = useDevice();
+
+    return <div className="page-layout">
+        {left && !isMobile && <div className="page-layout__left">{left}</div>}
+        {children && <div className="page-layout__content">{children}</div>}
+        {right && <div className="page-layout__right">{right}</div>}
+    </div>
+}