50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
import { View, Text, ScrollView, TouchableOpacity, TextInput } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { BottomNavBar } from '../src/components/BottomNavBar'
|
|
import { useState } from 'react'
|
|
|
|
const PLAYLISTS = [
|
|
{ id: '1', name: 'Chill Vibes' },
|
|
{ id: '2', name: 'Workout Mix' },
|
|
{ id: '3', name: 'Road Trip' },
|
|
{ id: '4', name: 'Late Night' },
|
|
]
|
|
|
|
export default function LibraryScreen() {
|
|
const router = useRouter()
|
|
const [search, setSearch] = useState('')
|
|
const filtered = PLAYLISTS.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))
|
|
|
|
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">Library</Text>
|
|
<View className="flex-row items-center bg-music-card rounded-full px-4 py-2">
|
|
<Text className="text-music-muted">🔍</Text>
|
|
<TextInput
|
|
placeholder="Search playlists..."
|
|
placeholderTextColor="#888"
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
className="text-sm text-music-text ml-2 w-48"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex-wrap flex-row gap-6 justify-center">
|
|
{filtered.map((playlist) => (
|
|
<TouchableOpacity key={playlist.id} onPress={() => router.push(`/playlist?id=${playlist.id}` as any)} className="items-center">
|
|
<View className="w-24 h-24 rounded-full bg-music-vinyl mb-2" />
|
|
<Text className="text-sm text-music-text">{playlist.name}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
<BottomNavBar />
|
|
</View>
|
|
)
|
|
} |