u

code/base-project/base-app/src/components/custom/Header.tsx

@@ -1,17 +1,92 @@
-import { Stack } from 'expo-router'
-import { SafeAreaView } from 'react-native-safe-area-context'
+import type { ViewStyle } from 'react-native'
+import { Stack, useRouter } from 'expo-router'
+import React from 'react'
+import { Image, Text, TouchableOpacity, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { LucideIcon } from '../common/ao'
+
+export type StackScreenProps = React.ComponentProps<typeof Stack.Screen>
+
+interface CustomHeaderProps {
+  showHeader?: boolean
+  title?: string | React.ReactNode
+  left?: React.ReactNode
+  right?: React.ReactNode
+  safeArea?: boolean
+  screenProps?: StackScreenProps
+  className?: string
+  style?: ViewStyle
+}
+
+export default function CustomHeader({
+  showHeader = true,
+  title,
+  left,
+  right,
+  safeArea = true,
+  className = '',
+  style,
+  screenProps,
+}: CustomHeaderProps) {
+  const safeAreaInsets = useSafeAreaInsets()
+  const router = useRouter()
+
+  if (!showHeader) {
+    return (
+      <Stack.Screen
+        {...screenProps}
+        options={{
+          ...screenProps?.options,
+          headerShown: false,
+        }}
+      />
+    )
+  }
 
-export default function CustomHeader() {
   return (
     <>
-      <Stack.Screen options={{
-        headerShown: false,
-      }}
+      <Stack.Screen
+        {...screenProps}
+        options={{
+          ...screenProps?.options,
+          headerShown: false,
+        }}
       />
 
-      <SafeAreaView className='flex-1'>
-        
-      </SafeAreaView>
+      <View
+        className={`flex-row items-center h-24 px-2 ${className}`}
+        style={[
+          { paddingTop: safeArea ? safeAreaInsets.top : 0 },
+          style,
+        ]}
+      >
+        <View className="w-10 h-full justify-center">
+          {left || (
+            <TouchableOpacity onPress={() => router.back()}>
+              <LucideIcon icon="ArrowLeft" size={24} clickable={false} />
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View className="flex-1 items-center justify-center">
+          {typeof title === 'string'
+            ? (
+                <Text className="text-xl">{title}</Text>
+              )
+            : (
+                title
+              )}
+        </View>
+
+        <View className="w-10 h-full items-center justify-center">
+          {right || (
+            <Image
+              source={require('@/static/images/logo.png')}
+              style={{ width: 22, height: 22 }}
+            />
+          )}
+        </View>
+      </View>
     </>
   )
 }