music-app/mobile/app/radio.tsx
2026-07-03 01:06:35 +00:00

43 lines
1.9 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { View, Text, ScrollView, TouchableOpacity, TextInput } from 'react-native'
import { useRouter } from 'expo-router'
import { BottomNavBar } from '../src/components/BottomNavBar'
export default function RadioScreen() {
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">Internet Radio</Text>
<View className="w-10" />
</View>
<View className="flex-row items-center bg-music-card rounded-full px-4 py-3 mb-6">
<Text className="text-music-muted">🔍</Text>
<TextInput placeholder="What music is calling to you?" placeholderTextColor="#888" className="text-sm text-music-text ml-2 flex-1" />
</View>
<View className="mb-6 p-4 rounded-2xl bg-music-card">
<Text className="text-sm font-semibold text-music-text mb-3">Currently Airing Near You</Text>
<View className="h-48 rounded-xl bg-music-dark items-center justify-center">
<Text className="text-music-muted text-3xl">🗺</Text>
</View>
</View>
<View className="flex-wrap flex-row gap-4 justify-center">
{[1, 2, 3, 4, 5, 6].map((i) => (
<View key={i} className="w-32 h-32 rounded-xl bg-music-card items-center justify-center">
<View className="w-16 h-16 rounded-full bg-music-dark mb-2" />
<Text className="text-xs text-music-muted">Station {i}</Text>
</View>
))}
</View>
</ScrollView>
<BottomNavBar />
</View>
)
}