fix: error

components/bestai/category-tabs.tsx

@@ -0,0 +1,79 @@
+import { memo } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+type Category = {
+  id: string;
+  label: string;
+};
+
+type CategoryTabsProps = {
+  categories: Category[];
+  activeId: string;
+  onChange: (id: string) => void;
+};
+
+export function CategoryTabs({ categories, activeId, onChange }: CategoryTabsProps) {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.container}
+    >
+      {categories.map(category => (
+        <CategoryTabItem
+          key={category.id}
+          category={category}
+          isActive={category.id === activeId}
+          onPress={onChange}
+        />
+      ))}
+    </ScrollView>
+  );
+}
+
+type CategoryTabItemProps = {
+  category: Category;
+  isActive: boolean;
+  onPress: (id: string) => void;
+};
+
+const CategoryTabItem = memo(({ category, isActive, onPress }: CategoryTabItemProps) => {
+  return (
+    <Pressable onPress={() => onPress(category.id)} style={styles.tabButton}>
+      <Text style={[styles.label, isActive && styles.labelActive]}>{category.label}</Text>
+      <View style={[styles.indicator, isActive && styles.indicatorActive]} />
+    </Pressable>
+  );
+});
+CategoryTabItem.displayName = 'CategoryTabItem';
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+  },
+  tabButton: {
+    alignItems: 'center',
+    marginRight: 20,
+    paddingBottom: 10,
+  },
+  label: {
+    color: '#7F8794',
+    fontSize: 15,
+    fontWeight: '600',
+    letterSpacing: 0.3,
+  },
+  labelActive: {
+    color: '#C7FF00',
+  },
+  indicator: {
+    alignSelf: 'stretch',
+    height: 3,
+    marginTop: 8,
+    backgroundColor: 'transparent',
+    borderRadius: 999,
+  },
+  indicatorActive: {
+    backgroundColor: '#C7FF00',
+  },
+});