Initial commit: expo-popcore project

components/profile/content-tabs.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { ThemedText } from '@/components/themed-text';
+
+type TabKey = 'all' | 'image' | 'video';
+
+const TABS: { key: TabKey; label: string }[] = [
+  { key: 'all', label: 'All' },
+  { key: 'image', label: 'Image' },
+  { key: 'video', label: 'Video' },
+];
+
+export function ContentTabs({
+  activeTab,
+  onChangeTab,
+  isLoading = false,
+}: {
+  activeTab: TabKey;
+  onChangeTab: (tab: TabKey) => void;
+  isLoading?: boolean;
+}) {
+  const palette = darkPalette;
+
+  return (
+    <View style={[styles.tabsBar]}>
+      {TABS.map(tab => {
+        const isActive = tab.key === activeTab;
+        return (
+          <TouchableOpacity
+            key={tab.key}
+            activeOpacity={0.85}
+            onPress={() => onChangeTab(tab.key)}
+            disabled={isLoading}
+            style={[
+              styles.tabButton,
+              {
+                backgroundColor: isActive ? palette.tabActive : 'transparent',
+              },
+            ]}
+          >
+            <ThemedText
+              style={[
+                styles.tabLabel,
+                {
+                  color: isActive ? palette.onAccent : palette.textSecondary,
+                },
+              ]}
+            >
+              {tab.label}
+            </ThemedText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const darkPalette = {
+  pill: '#16171C',
+  border: '#1D1E24',
+  tabActive: '#FFFFFF',
+  onAccent: '#050505',
+  textSecondary: '#8E9098',
+};
+
+const styles = {
+  tabsBar: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'flex-start' as const,
+    borderWidth: 0,
+    borderRadius: 999,
+    padding: 0,
+    gap: 4,
+  },
+  tabButton: {
+    borderRadius: 999,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  },
+  tabLabel: {
+    fontSize: 15,
+    fontWeight: '600' as const,
+  },
+  loadingIndicator: {
+    height: 18,
+  },
+};