61 lines
2.6 KiB
TypeScript
61 lines
2.6 KiB
TypeScript
import { View, Text, ScrollView, TouchableOpacity, FlatList } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { usePlayerStore } from '../src/store/playerStore'
|
|
import { BottomNavBar } from '../src/components/BottomNavBar'
|
|
|
|
const SONGS = [
|
|
{ id: '1', title: 'Song One', duration: 234 },
|
|
{ id: '2', title: 'Song Two', duration: 198 },
|
|
{ id: '3', title: 'Song Three', duration: 267 },
|
|
{ id: '4', title: 'Song Four', duration: 312 },
|
|
{ id: '5', title: 'Song Five', duration: 189 },
|
|
]
|
|
|
|
const PLAYLISTS = [
|
|
{ id: '1', name: 'Chill Vibes' },
|
|
{ id: '2', name: 'Workout' },
|
|
{ id: '3', name: 'Road Trip' },
|
|
{ id: '4', name: 'Late Night' },
|
|
{ id: '5', name: 'Focus' },
|
|
]
|
|
|
|
export default function PlaylistScreen() {
|
|
const router = useRouter()
|
|
const isPlaying = usePlayerStore(s => s.isPlaying)
|
|
const togglePlay = usePlayerStore(s => s.togglePlay)
|
|
|
|
return (
|
|
<View className="flex-1 bg-music-black flex-row">
|
|
<View className="w-20 bg-music-dark border-r border-music-border items-center py-4 gap-3">
|
|
<TouchableOpacity onPress={() => router.push('/library' as any)}>
|
|
<Text className="text-music-muted text-xl">←</Text>
|
|
</TouchableOpacity>
|
|
{PLAYLISTS.map((pl, i) => (
|
|
<TouchableOpacity key={pl.id} className={`w-14 h-14 rounded-lg bg-music-card ${i === 0 ? 'border-2 border-music-accent' : ''}`} />
|
|
))}
|
|
<View className="flex-1 w-1 bg-music-border rounded-full relative">
|
|
<View className="absolute bottom-0 w-full bg-music-accent rounded-full" style={{ height: '35%' }} />
|
|
</View>
|
|
<Text className="text-music-muted text-sm">⭐</Text>
|
|
<TouchableOpacity onPress={togglePlay}>
|
|
<Text className="text-music-accent text-xl">{isPlaying ? '⏸' : '▶️'}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView className="flex-1 px-6 py-4">
|
|
<View className="flex-row items-center justify-between mb-4">
|
|
<Text className="text-2xl font-semibold text-music-text">Chill Vibes</Text>
|
|
<Text className="text-music-muted">📢</Text>
|
|
</View>
|
|
<View className="w-48 h-48 rounded-xl bg-music-card mb-6" />
|
|
{SONGS.map((song) => (
|
|
<View key={song.id} className="flex-row items-center gap-3 py-2">
|
|
<View className="w-8 h-8 rounded-full bg-music-vinyl" />
|
|
<Text className="flex-1 text-sm text-music-text">{song.title}</Text>
|
|
<Text className="text-xs text-music-muted">{Math.floor(song.duration / 60)}:{(song.duration % 60).toString().padStart(2, '0')}</Text>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
} |