mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
3import {usePalette} from 'lib/hooks/usePalette'
4import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
5
6interface Props {
7 testID?: string
8 title: JSX.Element
9 horizontal: boolean
10 titleStyle?: StyleProp<ViewStyle>
11 contentStyle?: StyleProp<ViewStyle>
12}
13
14export function TitleColumnLayout({
15 testID,
16 title,
17 horizontal,
18 children,
19 titleStyle,
20 contentStyle,
21}: React.PropsWithChildren<Props>) {
22 const pal = usePalette('default')
23 const titleBg = useColorSchemeStyle(pal.viewLight, pal.view)
24 const contentBg = useColorSchemeStyle(pal.view, {
25 backgroundColor: pal.colors.background,
26 borderColor: pal.colors.border,
27 borderLeftWidth: 1,
28 })
29
30 const layoutStyles = horizontal ? styles2Column : styles1Column
31 return (
32 <View testID={testID} style={layoutStyles.container}>
33 <View style={[layoutStyles.title, titleBg, titleStyle]}>{title}</View>
34 <View style={[layoutStyles.content, contentBg, contentStyle]}>
35 {children}
36 </View>
37 </View>
38 )
39}
40
41const styles2Column = StyleSheet.create({
42 container: {
43 flexDirection: 'row',
44 height: '100%',
45 },
46 title: {
47 flex: 1,
48 paddingHorizontal: 40,
49 paddingBottom: 80,
50 justifyContent: 'center',
51 },
52 content: {
53 flex: 2,
54 paddingHorizontal: 40,
55 justifyContent: 'center',
56 },
57})
58
59const styles1Column = StyleSheet.create({
60 container: {},
61 title: {
62 paddingHorizontal: 40,
63 paddingVertical: 40,
64 },
65 content: {
66 paddingHorizontal: 40,
67 paddingVertical: 40,
68 },
69})