components/Intro.tsx - master - Muip/ProBody

components/Intro.tsx
161 строка6 KB
chmerev
new
14 авг 2024, 12:02
14 авг 2024, 12:02595f266
import React, { useRef } from 'react';
import { StyleSheet, Image } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import AButton from './AButton';
import AView from './AView';
import ATextHeader from './ATextHeader';
import AText from './AText';
import Background from '../assets/images/background.png';

interface Slide {
	key: string;
}

const slides: Slide[] = [
	{
		key: 'slide1',
	},
	{
		key: 'slide2',
	},
	{
		key: 'slide3',
	},
	{
		key: 'slide4',
	},
];

const AppIntro: React.FC<{ onFinished: () => void }> = ({ onFinished }) => {
	const sliderRef = useRef<AppIntroSlider>(null);

	const renderSlide = ({ index }: { item: Slide, index: number }) => (
		<>
			{index === 0 ? slide1(sliderRef, index) : index === 1 ? slide2(sliderRef, index) : index === 2 ? slide3(sliderRef, index) : index === 3 ? slide4(onFinished) : null}
		</>
	);

	return (
		<AppIntroSlider
			ref={sliderRef}
			data={slides}
			renderItem={renderSlide}
			dotStyle={styles.dot}
			activeDotStyle={styles.activeDot}
			nextLabel=''
			prevLabel=''
			doneLabel=''
		/>
	);
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function slide1(sliderRef: React.RefObject<AppIntroSlider<any>>, index: number) {
	return (
		<AView style={{...styles.slide, display: 'flex', alignItems: 'center'}}>
			<Image source={Background} style={styles.backgroundImage} resizeMode={'stretch'} />
			<Image source={require('../assets/images/logo-main.png')} style={{width: 40, height: 72}} resizeMode={'contain'} />
			<ATextHeader style={{...styles.title, fontSize: 38, textAlign: 'center', marginTop: 15, width: '100%', lineHeight: 45}}>{'Добро пожаловать \nв '}<ATextHeader style={{fontFamily: 'SfProDisplayBold', color: '#0C7670'}}>PRO.BODY</ATextHeader></ATextHeader>
			<AText style={{fontSize: 46}}>🧠</AText>
			<AText style={{textAlign: 'center', width: '80%', fontSize: 24, marginBottom: 30}}>Вы попали в пространство саморазвития и практик, основанных на научных исследованиях</AText>

			<AButton onPress={() => sliderRef.current?.goToSlide(index + 1)} text='Далее' style={{height: 50, width: 120}}  textStyle={{textAlign: 'center'}}/>
		</AView>
	)
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function slide2(sliderRef: React.RefObject<AppIntroSlider<any>>, index: number) {
	return (
		<AView style={{...styles.slide, display: 'flex', alignItems: 'center', padding: 0}}>
			<Image source={Background} style={styles.backgroundImage} resizeMode={'stretch'} />
			<AText style={{fontSize: 46}}>🎧</AText>
			<ATextHeader style={{...styles.title, fontSize: 38, textAlign: 'center', marginTop: 0, width: '100%', lineHeight: 45, paddingHorizontal: 20}}>Телесные трансы и гипнозы под любой запрос:</ATextHeader>
			<AText style={{textAlign: 'center', width: '100%', fontSize: 18, marginBottom: 30, paddingHorizontal: 20}}>Отношения, связь с собой, финансы, здоровье, крепкий сон и глубокие терапевтические практики</AText>
			<AButton onPress={() => sliderRef.current?.goToSlide(index + 1)} text='Далее' style={{height: 50, width: 120}}  textStyle={{textAlign: 'center'}}/>

			<Image source={require('../assets/images/slides/3.png')} style={{width: '100%', height: '40%'}} resizeMode={'contain'} />
		</AView>
	)
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function slide3(sliderRef: React.RefObject<AppIntroSlider<any>>, index: number) {
	return (
		<AView style={{...styles.slide, display: 'flex', alignItems: 'center'}}>
			<Image source={Background} style={styles.backgroundImage} resizeMode={'stretch'} />
			<Image source={require('../assets/images/slides/4.png')} style={{width: '100%', height: '40%'}} resizeMode={'contain'} />
			<AText style={{fontSize: 46, marginTop: 20}}>🔥</AText>
			<AText style={{textAlign: 'center', width: '80%', fontSize: 22, marginBottom: 30}}>Вдохновляющие мягкие внушения на каждый день для заряда бодрости и мотивации</AText>

			<AButton onPress={() => sliderRef.current?.goToSlide(index + 1)} text='Далее' style={{height: 50, width: 120}}  textStyle={{textAlign: 'center'}}/>
		</AView>
	)
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function slide4(onFinished: () => void) {
	return (
		<AView style={{...styles.slide, display: 'flex', alignItems: 'center'}}>
			<Image source={Background} style={styles.backgroundImage} resizeMode={'stretch'} />
			<AText style={{fontSize: 46}}>💫</AText>
			<ATextHeader style={{...styles.title, fontSize: 38, textAlign: 'center', marginTop: 15, width: '100%', lineHeight: 45}}>Никогда не поздно</ATextHeader>

			<AButton onPress={onFinished} text='НАЧАТЬ' style={{height: 68, width: 327}}  textStyle={{textAlign: 'center', fontSize: 24}}/>
		</AView>
	)
}

const styles = StyleSheet.create({
	slide: {
		flex: 1,
		justifyContent: 'center',
		backgroundColor: '#fff',
		padding: 24,
		position: 'relative'
	},
	nextButtonStyle: {width: 238, marginLeft: 'auto', marginRight: 'auto'},
	doneButtonStyle: {width: 320, marginLeft: 'auto', marginRight: 'auto'},
	backgroundImage: {
		position: 'absolute', width: '120%', height: '120%', top: 0, left: 0
	},
	dot: {
		backgroundColor: 'transparent',
	},
	activeDot: {
		backgroundColor: 'transparent',
	},
	image: {
		width: '100%',
		height: 300,
		marginBottom: 24,
	},
	title: {
		fontSize: 29,
		fontWeight: 'bold',
		marginBottom: 15,
		textAlign: 'left',
		lineHeight: 35
	},
	text: {
		fontSize: 16,
		textAlign: 'left',
		marginBottom: 48,
		lineHeight: 24
	},
	button: {
		backgroundColor: '#00bfff',
		borderRadius: 8,
		paddingVertical: 12,
		paddingHorizontal: 24,
		marginTop: 24,
	},
	buttonText: {
		fontSize: 16,
		color: '#fff',
		fontWeight: 'bold',
		textAlign: 'center',
	},
});

export default AppIntro;