Initial commit: expo-popcore project

components/CommonHeader.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { ArrowLeft } from 'lucide-react';
+import { router } from 'expo-router';
+import { Colors, Spacing, FontSize, Layout } from '@/constants/theme';
+
+interface CommonHeaderProps {
+  title: string;
+  showBack?: boolean;
+  onBack?: () => void;
+  rightContent?: React.ReactNode;
+  backgroundColor?: string;
+}
+
+export const CommonHeader: React.FC<CommonHeaderProps> = ({
+  title,
+  showBack = true,
+  onBack,
+  rightContent,
+  backgroundColor = '#FFFFFF',
+}) => {
+  const handleBackPress = () => {
+    if (onBack) {
+      onBack();
+      return;
+    }
+    router.back();
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor }]}>
+      <View style={styles.content}>
+        <View style={styles.leftArea}>
+          {showBack && (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              style={styles.backButton}
+              activeOpacity={0.7}
+            >
+              <ArrowLeft size={24} color="#007AFF" strokeWidth={2.5} />
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.centerArea}>
+          <Text style={styles.title} numberOfLines={1}>
+            {title}
+          </Text>
+        </View>
+
+        <View style={styles.rightArea}>
+          {rightContent}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: Layout.headerHeight,
+    borderBottomWidth: 0,
+    borderBottomColor: Colors.border,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: Spacing.md,
+  },
+  leftArea: {
+    width: 40,
+    height: '100%',
+    justifyContent: 'center',
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  centerArea: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: Spacing.sm,
+  },
+  title: {
+    fontSize: FontSize.lg,
+    fontWeight: '600',
+    color: Colors.text.primary,
+    textAlign: 'center',
+  },
+  rightArea: {
+    width: 40,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+});
+
+export default CommonHeader;