39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { BottomNavBar } from '../src/components/BottomNavBar'
|
|
|
|
const CHANNELS = [
|
|
{ id: '1', name: 'Lofi Girl - beats to relax/study to' },
|
|
{ id: '2', name: 'Chillhop Radio' },
|
|
{ id: '3', name: 'Lofi Hip Hop' },
|
|
]
|
|
|
|
export default function LofiScreen() {
|
|
const router = useRouter()
|
|
|
|
return (
|
|
<View className="flex-1 bg-music-black">
|
|
<ScrollView className="flex-1 px-4 pt-4">
|
|
<View className="flex-row items-center justify-between mb-6">
|
|
<TouchableOpacity onPress={() => router.push('/account' as any)} className="w-10 h-10 rounded-full bg-music-card items-center justify-center">
|
|
<Text className="text-music-muted">👤</Text>
|
|
</TouchableOpacity>
|
|
<Text className="text-xl font-semibold text-music-text">LoFi Channel</Text>
|
|
<View className="w-10" />
|
|
</View>
|
|
{CHANNELS.map((ch) => (
|
|
<TouchableOpacity key={ch.id} className="mb-4 rounded-2xl bg-music-card overflow-hidden" style={{ aspectRatio: 16 / 9 }}>
|
|
<View className="flex-1 justify-center items-center bg-music-vinyl">
|
|
<Text className="text-5xl">🎵</Text>
|
|
</View>
|
|
<View className="p-4 bg-black/80 absolute bottom-0 left-0 right-0">
|
|
<Text className="text-xs text-music-accent">LoFi</Text>
|
|
<Text className="text-sm font-medium text-music-text">{ch.name}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
<BottomNavBar />
|
|
</View>
|
|
)
|
|
} |