xref: /MusicFree/src/pages/musicDetail/index.tsx (revision c446f2b83c1bd26ef7ee96c37926a9cbde29bc16)

import StatusBar from '@/components/base/statusBar';
import useOrientation from '@/hooks/useOrientation';
import React from 'react';
import {StyleSheet, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import Background from './components/background';
import Bottom from './components/bottom';
import Content from './components/content';
import Lyric from './components/content/lyric';
import NavBar from './components/navBar';

export default function MusicDetail() {
    const orientation = useOrientation();
    return (
        <>
            <Background />
            <SafeAreaView style={style.wrapper}>
                <StatusBar backgroundColor={'transparent'} />
                <View style={style.bodyWrapper}>
                    <View style={style.container}>
                        <NavBar />
                        <Content />
                        <Bottom />
                    </View>
                    {orientation === 'horizonal' ? <Lyric /> : null}
                </View>
            </SafeAreaView>
        </>
    );
}

const style = StyleSheet.create({
    wrapper: {
        width: '100%',
        flex: 1,
    },
    bodyWrapper: {
        flex: 1,
        flexDirection: 'row',
    },
    container: {
        flex: 1,
    },
});