fix: error

2025-10-29 19:38:04 +08:00
parent 3a99ff96d5
commit 30ea4fb13c
34 changed files with 2185 additions and 870 deletions
--- a/components/bestai/feature-carousel.tsx
+++ b/components/bestai/feature-carousel.tsx
@@ -0,0 +1,101 @@
+import { memo } from 'react';
+import { Dimensions, FlatList, ListRenderItem, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Image } from 'expo-image';
+
+const WINDOW_WIDTH = Dimensions.get('window').width;
+const CARD_HORIZONTAL_GUTTER = 18;
+const CARD_WIDTH = Math.min(WINDOW_WIDTH - 64, 360);
+
+export type FeatureItem = {
+  id: string;
+  title: string;
+  subtitle: string;
+  image: string;
+};
+
+type FeatureCarouselProps = {
+  items: FeatureItem[];
+  onPress?: (item: FeatureItem) => void;
+};
+
+export function FeatureCarousel({ items, onPress }: FeatureCarouselProps) {
+  const cardInterval = CARD_WIDTH + CARD_HORIZONTAL_GUTTER;
+ 
+  const renderItem: ListRenderItem<FeatureItem> = ({ item }) => <FeatureCard item={item} onPress={onPress} />;
+
+  return (
+    <FlatList
+      data={items}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.id}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.contentContainer}
+      snapToInterval={cardInterval}
+      snapToAlignment="start"
+      decelerationRate="fast"
+    />
+  );
+}
+
+type FeatureCardProps = {
+  item: FeatureItem;
+  onPress?: (item: FeatureItem) => void;
+};
+
+const FeatureCard = memo(({ item, onPress }: FeatureCardProps) => {
+  return (
+    <Pressable
+      onPress={() => onPress?.(item)}
+      style={({ pressed }) => [
+        styles.card,
+        pressed && {
+          transform: [{ scale: 0.98 }],
+        },
+      ]}
+    >
+      <Image source={{ uri: item.image }} style={styles.image} contentFit="cover" />
+      <View style={styles.cardContent}>
+        <Text style={styles.cardTitle}>{item.title}</Text>
+        <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
+      </View>
+    </Pressable>
+  );
+});
+FeatureCard.displayName = 'FeatureCard';
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingVertical: 18,
+    paddingRight: 24,
+  },
+  card: {
+    width: CARD_WIDTH,
+    marginRight: CARD_HORIZONTAL_GUTTER,
+    borderRadius: 22,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: '#1B1C20',
+    backgroundColor: '#0F1013',
+  },
+  image: {
+    width: '100%',
+    height: 184,
+  },
+  cardContent: {
+    padding: 18,
+    backgroundColor: '#111115',
+  },
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: '#F4F8FF',
+    marginBottom: 6,
+    letterSpacing: 0.8,
+  },
+  cardSubtitle: {
+    fontSize: 13,
+    color: '#9AA0AD',
+    lineHeight: 18,
+  },
+});