107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
|
|
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 colorScheme = useColorScheme();
|
|
const palette = colorScheme === 'dark' ? darkPalette : lightPalette;
|
|
|
|
return (
|
|
<View style={[styles.tabsBar, { backgroundColor: palette.pill, borderColor: palette.border }]}>
|
|
{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',
|
|
},
|
|
]}
|
|
>
|
|
{isActive && isLoading ? (
|
|
<ActivityIndicator
|
|
size="small"
|
|
color={palette.onAccent}
|
|
style={styles.loadingIndicator}
|
|
/>
|
|
) : (
|
|
<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 lightPalette = {
|
|
pill: '#E8EBF4',
|
|
border: '#E2E5ED',
|
|
tabActive: '#FFFFFF',
|
|
onAccent: '#FFFFFF',
|
|
textSecondary: '#5E6474',
|
|
};
|
|
|
|
const styles = {
|
|
tabsBar: {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
borderWidth: 0,
|
|
borderRadius: 999,
|
|
padding: 0,
|
|
},
|
|
tabButton: {
|
|
flex: 1,
|
|
borderRadius: 999,
|
|
paddingVertical: 10,
|
|
alignItems: 'center' as const,
|
|
justifyContent: 'center' as const,
|
|
},
|
|
tabLabel: {
|
|
fontSize: 15,
|
|
fontWeight: '600' as const,
|
|
},
|
|
loadingIndicator: {
|
|
height: 18,
|
|
},
|
|
};
|