71 lines
3.2 KiB
TypeScript
71 lines
3.2 KiB
TypeScript
import { View, Text, ScrollView, TouchableOpacity } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { BottomNavBar } from '../src/components/BottomNavBar'
|
|
|
|
export default function HomeScreen() {
|
|
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')} className="w-10 h-10 rounded-full bg-music-card items-center justify-center">
|
|
<Text className="text-music-muted text-xl">👤</Text>
|
|
</TouchableOpacity>
|
|
<View className="flex-row gap-2">
|
|
{['Music', 'New Music', 'Mood', 'LoFi'].map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab}
|
|
onPress={() => router.push({
|
|
pathname: tab === 'Music' ? '/library' : tab === 'New Music' ? '/releases' : tab === 'Mood' ? '/mood' : '/lofi'
|
|
} as any)}
|
|
className="px-4 py-2 rounded-full bg-music-card"
|
|
>
|
|
<Text className="text-sm text-music-text">{tab}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
<View className="mb-6 p-4 rounded-2xl bg-music-card">
|
|
<Text className="text-xs text-music-muted uppercase tracking-wider mb-3">Now Playing</Text>
|
|
<View className="flex-row items-center gap-4">
|
|
<View className="w-16 h-16 rounded-lg bg-music-vinyl items-center justify-center">
|
|
<Text>🎵</Text>
|
|
</View>
|
|
<View>
|
|
<Text className="font-semibold text-music-text">No song playing</Text>
|
|
<Text className="text-sm text-music-muted">Select a track</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<Text className="text-lg font-semibold text-music-text mb-3">Quick Access</Text>
|
|
<View className="flex-row gap-3 mb-6">
|
|
<TouchableOpacity onPress={() => router.push('/library' as any)} className="flex-1 p-4 rounded-xl bg-music-card">
|
|
<Text className="text-music-accent mb-2">📚</Text>
|
|
<Text className="font-medium text-music-text">My Music</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => router.push('/releases' as any)} className="flex-1 p-4 rounded-xl bg-music-card">
|
|
<Text className="text-mood-happy mb-2">✨</Text>
|
|
<Text className="font-medium text-music-text">New Releases</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<Text className="text-lg font-semibold text-music-text mb-3">Mood Radio</Text>
|
|
<View className="flex-wrap flex-row gap-3">
|
|
{['Sad', 'Happy', 'Energetic', 'Focused', 'Chill', 'Romantic', 'Angry', 'Nostalgic', 'Melancholy', 'Dreamy'].map((mood) => (
|
|
<TouchableOpacity
|
|
key={mood}
|
|
onPress={() => router.push('/mood' as any)}
|
|
className="px-4 py-3 rounded-xl bg-music-card"
|
|
>
|
|
<Text className="text-sm text-music-text">{mood}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
<BottomNavBar />
|
|
</View>
|
|
)
|
|
} |