80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
import { View, Text, ScrollView, TouchableOpacity, TextInput } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { BottomNavBar } from '../src/components/BottomNavBar'
|
|
import { usePlayerStore } from '../src/store/playerStore'
|
|
|
|
export default function SearchScreen() {
|
|
const router = useRouter()
|
|
const currentSong = usePlayerStore(s => s.currentSong)
|
|
const isPlaying = usePlayerStore(s => s.isPlaying)
|
|
const togglePlay = usePlayerStore(s => s.togglePlay)
|
|
|
|
const features = [
|
|
{ id: 'music', name: 'Music', icon: '🎵', route: '/library' },
|
|
{ id: 'new', name: 'New Music', icon: '✨', route: '/releases' },
|
|
{ id: 'events', name: 'Live Events', icon: '🎪', route: '/' },
|
|
{ id: 'radio', name: 'Internet Radio', icon: '📻', route: '/radio' },
|
|
{ id: 'mood', name: 'Mood Radio', icon: '😊', route: '/mood' },
|
|
]
|
|
|
|
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>
|
|
<View className="w-10" />
|
|
<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="flex-wrap flex-row gap-3 mb-6">
|
|
{features.map((f) => (
|
|
<TouchableOpacity key={f.id} onPress={() => router.push(f.route as any)} className="flex-1 min-w-[30%] p-4 rounded-xl bg-music-card items-center">
|
|
<Text className="text-2xl mb-1">{f.icon}</Text>
|
|
<Text className="text-xs text-music-text">{f.name}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<Text className="text-lg font-semibold text-music-text mb-3">Music Suggestions</Text>
|
|
<View className="flex-wrap flex-row gap-3 mb-6">
|
|
{[...Array(10)].map((_, i) => (
|
|
<View key={i} className="w-[18%] aspect-square rounded-lg bg-music-card" />
|
|
))}
|
|
</View>
|
|
|
|
<Text className="text-lg font-semibold text-music-text mb-3">Your Library</Text>
|
|
<View className="flex-wrap flex-row gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<View key={i}>
|
|
<View className="w-20 h-20 rounded-lg bg-music-card" />
|
|
<Text className="text-sm text-music-text mt-2">Playlist {i}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{currentSong && (
|
|
<View className="bg-music-card border-t border-music-border px-4 py-2 flex-row items-center justify-between">
|
|
<View className="flex-row items-center gap-3">
|
|
<View className="w-10 h-10 rounded-full bg-music-vinyl" />
|
|
<View>
|
|
<Text className="text-sm font-medium text-music-text">{currentSong.title}</Text>
|
|
<Text className="text-xs text-music-muted">{currentSong.artist}</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={togglePlay}>
|
|
<Text className="text-music-accent text-2xl">{isPlaying ? '⏸' : '▶️'}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
<BottomNavBar />
|
|
</View>
|
|
)
|
|
} |