fix: error

components/bestai/community-grid.tsx

@@ -0,0 +1,179 @@
+import { memo } from 'react';
+import {
+  FlatList,
+  ListRenderItemInfo,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { Image } from 'expo-image';
+import { Ionicons } from '@expo/vector-icons';
+
+export type CommunityItem = {
+  id: string;
+  title: string;
+  image: string;
+  chip: string;
+  actionLabel: string;
+};
+
+type CommunityGridProps = {
+  items: CommunityItem[];
+  onPressCard?: (item: CommunityItem) => void;
+  onPressAction?: (item: CommunityItem) => void;
+};
+
+export function CommunityGrid({ items, onPressCard, onPressAction }: CommunityGridProps) {
+  const renderItem = ({ item, index }: ListRenderItemInfo<CommunityItem>) => {
+    const isLeftColumn = index % 2 === 0;
+    return (
+      <CommunityCard
+        item={item}
+        onPressCard={onPressCard}
+        onPressAction={onPressAction}
+        style={[styles.cardWrapper, isLeftColumn ? styles.cardLeft : styles.cardRight]}
+      />
+    );
+  };
+
+  return (
+    <FlatList
+      data={items}
+      renderItem={renderItem}
+      keyExtractor={(item) => item.id}
+      numColumns={2}
+      scrollEnabled={false}
+      columnWrapperStyle={styles.row}
+      contentContainerStyle={styles.contentContainer}
+    />
+  );
+}
+
+type CommunityCardProps = {
+  item: CommunityItem;
+  style?: StyleProp<ViewStyle>;
+  onPressCard?: (item: CommunityItem) => void;
+  onPressAction?: (item: CommunityItem) => void;
+};
+
+const CommunityCard = memo(({ item, style, onPressCard, onPressAction }: CommunityCardProps) => {
+  return (
+    <Pressable onPress={() => onPressCard?.(item)} style={[styles.card, style]}>
+      <View>
+        <Image source={{ uri: item.image }} style={styles.cardImage} contentFit="cover" />
+        <Chip label={item.chip} />
+      </View>
+      <Text style={styles.cardTitle}>{item.title}</Text>
+      <ActionButton label={item.actionLabel} onPress={() => onPressAction?.(item)} />
+    </Pressable>
+  );
+});
+CommunityCard.displayName = 'CommunityCard';
+
+type ChipProps = {
+  label: string;
+};
+
+const Chip = memo(({ label }: ChipProps) => {
+  return (
+    <View style={styles.chip}>
+      <Ionicons name="people-outline" size={14} color="#E5E9F2" style={styles.chipIcon} />
+      <Text style={styles.chipText}>{label}</Text>
+    </View>
+  );
+});
+Chip.displayName = 'CommunityChip';
+
+type ActionButtonProps = {
+  label: string;
+  onPress: () => void;
+};
+
+const ActionButton = memo(({ label, onPress }: ActionButtonProps) => {
+  return (
+    <Pressable onPress={onPress} style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}>
+      <Ionicons name="flash-outline" size={16} color="#050505" style={styles.buttonIcon} />
+      <Text style={styles.buttonText}>{label}</Text>
+    </Pressable>
+  );
+});
+ActionButton.displayName = 'CommunityActionButton';
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    paddingBottom: 24,
+  },
+  row: {
+    justifyContent: 'space-between',
+    marginBottom: 18,
+  },
+  cardWrapper: {
+    flex: 1,
+  },
+  cardLeft: {
+    marginRight: 8,
+  },
+  cardRight: {
+    marginLeft: 8,
+  },
+  card: {
+    backgroundColor: '#101115',
+    borderRadius: 20,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: '#1C1D22',
+  },
+  cardImage: {
+    width: '100%',
+    height: 148,
+    borderRadius: 16,
+    marginBottom: 14,
+  },
+  cardTitle: {
+    fontSize: 13,
+    letterSpacing: 0.8,
+    color: '#F5F8FF',
+    marginBottom: 12,
+  },
+  chip: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    backgroundColor: 'rgba(5, 5, 5, 0.72)',
+    borderRadius: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  chipIcon: {
+    marginRight: 6,
+  },
+  chipText: {
+    color: '#C7FF00',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    borderRadius: 14,
+    backgroundColor: '#B7FF2F',
+  },
+  buttonPressed: {
+    opacity: 0.9,
+  },
+  buttonIcon: {
+    marginRight: 4,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#050505',
+  },
+});