u

code/base-project/base-app/src/app/(tabs)/chat.tsx

@@ -11,6 +11,21 @@ export default function App() {
       <DateTimePicker
         mode="single"
         date={date}
+        selectedItemColor="#fff"
+        selectedTextStyle={{
+          fontWeight: 'bold',
+          color: '#00d279',
+        }}
+        headerTextStyle={{
+          fontSize: 18,
+        }}
+        headerButtonStyle={{
+          backgroundColor: '#ffffff',
+          borderRadius: 8,
+        }}
+        headerButtonColor="#00d279"
+        headerButtonSize={18}
+        headerButtonsPosition="right"
         onChange={params => setDate(params.date)}
       />
     </View>
@@ -21,5 +36,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
+    marginTop: 128,
+    padding: 16,
   },
 })

code/base-project/base-app/src/app/(tabs)/components/LocaleSelector.tsx

@@ -0,0 +1,68 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+const Locales = ['zh-cn', 'en', 'de', 'es']
+
+interface Props {
+  locale: string
+  setLocale: (locale: string) => void
+  mainColor?: string
+  activeTextColor?: string
+}
+
+export default function LocaleSelector({
+  locale,
+  setLocale,
+  mainColor,
+  activeTextColor,
+}: Props) {
+  return (
+    <View style={styles.localeContainer}>
+      <Text style={{ marginRight: 8 }}>Locale:</Text>
+      {Locales.map((item, index) => (
+        <Pressable
+          key={index}
+          style={[
+            styles.localeButton,
+            item === locale && {
+              backgroundColor: mainColor,
+            },
+          ]}
+          onPress={() => setLocale(item)}
+          accessibilityRole="button"
+          accessibilityLabel={item.toUpperCase()}
+        >
+          <Text
+            style={[
+              styles.localeButtonText,
+              item === locale && {
+                fontWeight: 'bold',
+                color: activeTextColor,
+              },
+            ]}
+          >
+            {item.split('-')[0]?.toUpperCase()}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  localeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  localeButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 36,
+    height: 36,
+    borderRadius: 36,
+    margin: 2,
+  },
+  localeButtonText: {
+    fontSize: 15,
+  },
+})

code/base-project/base-app/src/app/(tabs)/components/ThemeSelector.tsx

@@ -0,0 +1,54 @@
+import { Pressable, StyleSheet, View } from 'react-native'
+
+export interface ITheme {
+  mainColor: string
+  activeTextColor: string
+}
+
+interface Props {
+  themes: ITheme[]
+  setTheme: (theme: ITheme) => void
+}
+
+export default function ThemeSelector({ themes = [], setTheme }: Props) {
+  return (
+    <View style={styles.themeContainer}>
+      {themes.map((item, index) => (
+        <Pressable
+          key={index}
+          style={[
+            styles.themeButton,
+            {
+              borderColor: item.activeTextColor,
+              backgroundColor: item.mainColor,
+            },
+          ]}
+          onPress={() => setTheme(item)}
+          accessibilityRole="button"
+          accessibilityLabel="Set Active Theme"
+        />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  themeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    marginBottom: 10,
+    width: 330,
+  },
+  themeButton: {
+    borderWidth: 4,
+    width: 32,
+    height: 32,
+    borderRadius: 32,
+    margin: 5,
+    shadowRadius: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 0 },
+  },
+})