47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { View, Text, TouchableOpacity, ScrollView } from 'react-native'
|
||
import { useRouter } from 'expo-router'
|
||
import { BottomNavBar } from '../src/components/BottomNavBar'
|
||
import { useState } from 'react'
|
||
|
||
const TABS = [
|
||
{ id: 'playlist', label: 'Playlist' },
|
||
{ id: 'mood-playlist', label: 'Mood Playlist' },
|
||
{ id: 'radio', label: 'Radio' },
|
||
{ id: 'collab', label: 'Collab' },
|
||
]
|
||
|
||
export default function CreateScreen() {
|
||
const [activeTab, setActiveTab] = useState(TABS[0].id)
|
||
|
||
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">
|
||
<View className="w-10" />
|
||
<Text className="text-xl font-semibold text-music-text">Create</Text>
|
||
<View className="w-10" />
|
||
</View>
|
||
|
||
<View className="flex-row gap-2 mb-6">
|
||
{TABS.map((tab) => (
|
||
<TouchableOpacity
|
||
key={tab.id}
|
||
onPress={() => setActiveTab(tab.id)}
|
||
className={`px-4 py-2 rounded-full ${activeTab === tab.id ? 'bg-music-accent' : 'bg-music-card'}`}
|
||
>
|
||
<Text className={`text-sm ${activeTab === tab.id ? 'text-music-black font-medium' : 'text-music-muted'}`}>
|
||
{tab.label}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
))}
|
||
</View>
|
||
|
||
<View className="p-8 rounded-2xl bg-music-card items-center">
|
||
<Text className="text-4xl mb-3">➕</Text>
|
||
<Text className="text-lg font-semibold text-music-text">{TABS.find(t => t.id === activeTab)?.label}</Text>
|
||
</View>
|
||
</ScrollView>
|
||
<BottomNavBar />
|
||
</View>
|
||
)
|
||
} |