v0.0.4

src/components/layout/PageShell/index.tsx

@@ -0,0 +1,42 @@
+import { PropsWithChildren } from 'react'
+import { ScrollView, View } from '@tarojs/components'
+import { useSystemLayout } from '@/hooks/useSystemLayout'
+import './index.scss'
+
+interface PageShellProps {
+  className?: string
+  scroll?: boolean
+  withTabBar?: boolean
+}
+
+export function PageShell({
+  children,
+  className = '',
+  scroll = true,
+  withTabBar = true
+}: PropsWithChildren<PageShellProps>) {
+  const { safeBottom } = useSystemLayout()
+  const content = (
+    <View
+      className={`page-shell__inner ${className}`}
+      style={{ paddingBottom: withTabBar ? `${108 + safeBottom}px` : `${24 + safeBottom}px` }}
+    >
+      {children}
+    </View>
+  )
+
+  return (
+    <View className='page-shell'>
+      {scroll ? (
+        <ScrollView scrollY className='page-shell__scroll' enhanced showScrollbar={false}>
+          {content}
+        </ScrollView>
+      ) : (
+        content
+      )}
+    </View>
+  )
+}
+
+export default PageShell
+