88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import React from 'react'
|
|
import { Image, Platform, Pressable, Text, View } from 'react-native'
|
|
import { icons } from '../assets'
|
|
import { Palette, Style } from '../styles'
|
|
import { FONT_FAMILY } from '../styles/Fonts'
|
|
import ProgressBar from './ProgressBar'
|
|
|
|
const MusicLandHeader = ({
|
|
onPressBack,
|
|
onPressSkip,
|
|
showSkip = false,
|
|
progress = 1,
|
|
logo = null,
|
|
style,
|
|
}) => {
|
|
const isWeb = Platform.OS === 'web'
|
|
const backHitSlop = isWeb ? undefined : { top: 16, right: 16, bottom: 16, left: 16 }
|
|
const backButtonStyle = isWeb
|
|
? {
|
|
...Style.containerRow,
|
|
gap: 8,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 7,
|
|
borderRadius: 100,
|
|
borderWidth: 1,
|
|
backgroundColor: Palette.ultraLightWhite,
|
|
borderColor: Palette.ultraLightWhite,
|
|
borderStyle: 'solid',
|
|
}
|
|
: { width: 24, height: 24, ...Style.containerCenter }
|
|
const backIconSource = isWeb ? icons.chevronDown : icons.chevronDown
|
|
const backIconStyle = {
|
|
width: 15,
|
|
height: 15,
|
|
transform: [{ rotate: '90deg' }],
|
|
}
|
|
|
|
return (
|
|
<View style={{ alignItems: 'center', gap: 16, ...style }}>
|
|
<View style={{ width: '100%', ...Style.containerRow, gap: 16 }}>
|
|
<Pressable style={backButtonStyle} onPress={onPressBack} hitSlop={backHitSlop}>
|
|
<Image source={backIconSource} style={backIconStyle} resizeMode="contain" />
|
|
{isWeb && (
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
}}
|
|
>
|
|
Retour
|
|
</Text>
|
|
)}
|
|
</Pressable>
|
|
|
|
<View style={{ flex: 1 }}>
|
|
<ProgressBar progress={progress} />
|
|
</View>
|
|
{showSkip && (
|
|
<Pressable onPress={onPressSkip}>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
}}
|
|
>
|
|
Passer
|
|
</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
{logo && (
|
|
<Image
|
|
source={logo}
|
|
style={{
|
|
alignSelf: 'center',
|
|
height: isWeb ? 150 : 100,
|
|
resizeMode: 'contain',
|
|
}}
|
|
/>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default MusicLandHeader
|