36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import React from 'react'
|
||
import { View, Text, TouchableOpacity } from 'react-native'
|
||
import { useRouter, usePathname } from 'expo-router'
|
||
|
||
const NAV_ITEMS = [
|
||
{ id: 'index', label: 'Home', icon: '🏠', route: '/' },
|
||
{ id: 'playlist', label: 'Playlist', icon: '📀', route: '/playlist' },
|
||
{ id: 'search', label: 'Search', icon: '🔍', route: '/search' },
|
||
{ id: 'radio', label: 'Radio', icon: '📻', route: '/radio' },
|
||
{ id: 'create', label: 'Create', icon: '➕', route: '/create' },
|
||
]
|
||
|
||
export function BottomNavBar() {
|
||
const router = useRouter()
|
||
const pathname = usePathname()
|
||
|
||
return (
|
||
<View className="flex-row bg-music-dark border-t border-music-border pb-2">
|
||
{NAV_ITEMS.map((item) => {
|
||
const isActive = pathname === item.route || (item.route !== '/' && pathname.startsWith(item.route))
|
||
return (
|
||
<TouchableOpacity
|
||
key={item.id}
|
||
onPress={() => router.push(item.route as any)}
|
||
className="flex-1 items-center py-2"
|
||
>
|
||
<Text className="text-xl">{item.icon}</Text>
|
||
<Text className={`text-xs mt-0.5 ${isActive ? 'text-music-accent' : 'text-music-muted'}`}>
|
||
{item.label}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
)
|
||
})}
|
||
</View>
|
||
)
|
||
} |