146 lines
4.7 KiB
TypeScript
146 lines
4.7 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Pressable,
|
|
StatusBar as RNStatusBar,
|
|
ActivityIndicator,
|
|
} from 'react-native'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useRouter } from 'expo-router'
|
|
|
|
import { TopArrowIcon } from '@/components/icon'
|
|
import { useCategories } from '@/hooks/data/use-categories'
|
|
|
|
export default function ChannelsScreen() {
|
|
const router = useRouter()
|
|
const [isExpanded, setIsExpanded] = useState(true)
|
|
const [selectedChannel, setSelectedChannel] = useState<string>('')
|
|
|
|
const { load, loading, data } = useCategories()
|
|
|
|
useEffect(() => {
|
|
load({ isActive: true })
|
|
}, [])
|
|
|
|
return (
|
|
<View style={styles.screen}>
|
|
<StatusBar style="light" />
|
|
<RNStatusBar barStyle="light-content" />
|
|
|
|
{/* 顶部容器 - 包含 header 和频道选择区域，带底部圆角 */}
|
|
<View style={styles.topContainer}>
|
|
<SafeAreaView style={styles.safeArea} edges={['top']}>
|
|
{/* 标题栏 */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerTitle}>全部频道</Text>
|
|
<Pressable
|
|
onPress={() => {
|
|
if (isExpanded) {
|
|
router.push('/')
|
|
} else {
|
|
setIsExpanded(true)
|
|
}
|
|
}}
|
|
>
|
|
<TopArrowIcon />
|
|
</Pressable>
|
|
</View>
|
|
|
|
{/* 频道选择区域 */}
|
|
{isExpanded && (
|
|
<View style={styles.channelsSection}>
|
|
{loading ? (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="small" color="#F5F5F5" />
|
|
</View>
|
|
) : (
|
|
<View style={styles.channelsGrid}>
|
|
{data?.categories.map((category) => (
|
|
<Pressable
|
|
key={category.id}
|
|
onPress={() => setSelectedChannel(category.id)}
|
|
>
|
|
<View style={[
|
|
styles.channelButtonDefault,
|
|
selectedChannel === category.id && styles.channelButtonSelected
|
|
]}>
|
|
<Text style={styles.channelButtonText}>
|
|
{category.name}
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
)}
|
|
</View>
|
|
)}
|
|
</SafeAreaView>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
screen: {
|
|
flex: 1,
|
|
backgroundColor: '#0A0A0A',
|
|
},
|
|
topContainer: {
|
|
backgroundColor: '#16181B',
|
|
borderBottomLeftRadius: 16,
|
|
borderBottomRightRadius: 16,
|
|
overflow: 'hidden',
|
|
},
|
|
safeArea: {
|
|
backgroundColor: '#16181B',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingTop: 27,
|
|
paddingBottom: 12,
|
|
},
|
|
headerTitle: {
|
|
color: '#F5F5F5',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
channelsSection: {
|
|
paddingHorizontal: 12,
|
|
paddingBottom: 12,
|
|
},
|
|
channelsGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
},
|
|
channelButtonDefault: {
|
|
backgroundColor: '#262A31',
|
|
borderRadius: 100,
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 17,
|
|
borderWidth: 1,
|
|
borderColor: '#262A31',
|
|
},
|
|
channelButtonSelected: {
|
|
backgroundColor: '#FF6B35',
|
|
borderColor: '#FF6B35',
|
|
},
|
|
channelButtonText: {
|
|
color: '#F5F5F5',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
textAlign: 'center',
|
|
},
|
|
loadingContainer: {
|
|
paddingVertical: 20,
|
|
alignItems: 'center',
|
|
},
|
|
})
|
|
|