feature:基本功能

client/components/home/ThemeModal.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+
+import SheetModal from '@/components/ui/SheetModal';
+
+export type ThemeMode = 'scenery' | 'color';
+
+type Props = {
+  visible: boolean;
+  mode: ThemeMode;
+  onSelect: (mode: ThemeMode) => void;
+  onClose: () => void;
+};
+
+export default function ThemeModal({ visible, mode, onSelect, onClose }: Props) {
+  const { t } = useTranslation();
+  return (
+    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose}>
+      <View style={styles.row}>
+        <ThemeCard
+          title={t('theme.scenery')}
+          selected={mode === 'scenery'}
+          onPress={() => onSelect('scenery')}
+        >
+          <Image
+            source={require('../../assets/images/index/index_flowers.png')}
+            resizeMode="cover"
+            style={styles.previewImage}
+          />
+        </ThemeCard>
+
+        <ThemeCard
+          title={t('theme.color')}
+          selected={mode === 'color'}
+          onPress={() => onSelect('color')}
+        >
+          <View style={styles.colorPreview} />
+        </ThemeCard>
+      </View>
+    </SheetModal>
+  );
+}
+
+function ThemeCard({
+  title,
+  selected,
+  onPress,
+  children,
+}: {
+  title: string;
+  selected: boolean;
+  onPress: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[styles.card, selected ? styles.cardSelected : styles.cardUnselected]}
+      hitSlop={6}
+    >
+      <View style={styles.preview}>{children}</View>
+      <Text style={styles.cardTitle}>{title}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 14,
+    paddingBottom: 18,
+  },
+  card: {
+    flex: 1,
+    borderRadius: 18,
+    padding: 10,
+    backgroundColor: 'rgba(255,255,255,0.55)',
+  },
+  cardSelected: {
+    borderWidth: 2,
+    borderColor: '#F99CC0',
+  },
+  cardUnselected: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(94,42,40,0.18)',
+  },
+  preview: {
+    height: 96,
+    borderRadius: 14,
+    overflow: 'hidden',
+    backgroundColor: '#fff',
+    marginBottom: 10,
+  },
+  previewImage: {
+    width: '100%',
+    height: '100%',
+  },
+  colorPreview: {
+    flex: 1,
+    backgroundColor: '#F3D0E1',
+  },
+  cardTitle: {
+    color: '#5E2A28',
+    fontSize: 14,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+});
+