Coder
52 changed files with 562 additions and 138 deletions
Binary file not shown.
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<Workspace |
||||
version = "1.0"> |
||||
</Workspace> |
||||
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 179 B |
|
After Width: | Height: | Size: 4.9 KiB |
@ -1,8 +1,9 @@
@@ -1,8 +1,9 @@
|
||||
import {MainLocaleModule} from '../../types'; |
||||
import {settingTranslation} from './settings.translation'; |
||||
import {onBoardingTranslation} from './steps.translation'; |
||||
|
||||
import { packagesListTranslation } from './packages-list.translation'; |
||||
export const en: MainLocaleModule = { |
||||
settingTranslation, |
||||
stepTranslation: onBoardingTranslation, |
||||
packagesListTranslation |
||||
}; |
||||
|
||||
@ -0,0 +1,18 @@
@@ -0,0 +1,18 @@
|
||||
import {PackagesListLocale} from '../../types/packages-list.types'; |
||||
export const packagesListTranslation: PackagesListLocale.Core = { |
||||
under18: { |
||||
title: 'Under 18', |
||||
description: |
||||
'Sharp questions and tasks for young people and of courseno alcohol.', |
||||
}, |
||||
light: { |
||||
title: 'Light', |
||||
description: |
||||
'Challenge your friends or your significant other and see how far they can go!', |
||||
}, |
||||
crazy: { |
||||
title: 'Crazy', |
||||
description: |
||||
'Challenge your friends or your significant other and see how far they can go!', |
||||
}, |
||||
}; |
||||
@ -1,8 +1,10 @@
@@ -1,8 +1,10 @@
|
||||
import {MainLocaleModule} from '../../types'; |
||||
import {settingTranslation} from './settings.translation'; |
||||
import {onBoardingTranslationUa} from './step.translation'; |
||||
import {packagesListTranslation} from './packages-list.translation'; |
||||
|
||||
export const ua: MainLocaleModule = { |
||||
stepTranslation: onBoardingTranslationUa, |
||||
settingTranslation: settingTranslation, |
||||
packagesListTranslation, |
||||
}; |
||||
|
||||
@ -0,0 +1,18 @@
@@ -0,0 +1,18 @@
|
||||
import {PackagesListLocale} from '../../types/packages-list.types'; |
||||
export const packagesListTranslation: PackagesListLocale.Core = { |
||||
under18: { |
||||
title: 'до 18 років', |
||||
description: |
||||
'Гострі питання і завдання для молоді і звичайно без алкоголю.', |
||||
}, |
||||
light: { |
||||
title: 'легкий', |
||||
description: |
||||
'Киньте виклик своїм друзям або своїй другій половинці та подивіться, як далеко вони можуть зайти!', |
||||
}, |
||||
crazy: { |
||||
title: 'божевільний', |
||||
description: |
||||
'Киньте виклик своїм друзям або своїй другій половинці та подивіться, як далеко вони можуть зайти!', |
||||
}, |
||||
}; |
||||
@ -1,6 +1,8 @@
@@ -1,6 +1,8 @@
|
||||
import {OnBoardingLocale} from './onBoarding.types'; |
||||
import { SettingLocale } from './settings.types'; |
||||
import {OnBoardingLocale} from './on-boarding.types'; |
||||
import {SettingLocale} from './settings.types'; |
||||
import {PackagesListLocale} from './packages-list.types'; |
||||
export interface MainLocaleModule { |
||||
stepTranslation: OnBoardingLocale.OnboardingSteps; |
||||
settingTranslation: SettingLocale.core; |
||||
settingTranslation: SettingLocale.Core; |
||||
packagesListTranslation: PackagesListLocale.Core; |
||||
} |
||||
|
||||
@ -0,0 +1,12 @@
@@ -0,0 +1,12 @@
|
||||
export namespace PackagesListLocale { |
||||
export interface IStep { |
||||
title: string; |
||||
description: string; |
||||
} |
||||
export interface Core { |
||||
under18: IStep; |
||||
light: IStep; |
||||
crazy: IStep; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
import React, {FC} from 'react'; |
||||
import { |
||||
colors, |
||||
Header, |
||||
IRouteParams, |
||||
RouteKey, |
||||
ScreenLayout, |
||||
} from '../../shared'; |
||||
import {PackagesList} from '../../package'; |
||||
interface IProps extends IRouteParams {} |
||||
export const SelectPackages: FC<IProps> = ({navigation}) => { |
||||
return ( |
||||
<ScreenLayout |
||||
backgroundColor={colors.primaryColor} |
||||
backgroundStatusBar={colors.primaryColor} |
||||
headerComponent={ |
||||
<Header |
||||
title="Packages" |
||||
leftIcon="settings" |
||||
rightIcon="setting" |
||||
onPressRight={() => |
||||
navigation.navigate(RouteKey.Setting, { |
||||
previous_screen: RouteKey.Game, |
||||
title: RouteKey.Setting, |
||||
}) |
||||
} |
||||
/> |
||||
}> |
||||
<PackagesList /> |
||||
</ScreenLayout> |
||||
); |
||||
}; |
||||
@ -0,0 +1,54 @@
@@ -0,0 +1,54 @@
|
||||
import React from 'react'; |
||||
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native'; |
||||
import {colors, Icon} from '../../shared'; |
||||
|
||||
export const CustomPackage = () => { |
||||
return ( |
||||
<TouchableOpacity style={style.container}> |
||||
<View style={{flexDirection: 'row'}}> |
||||
<View style={style.iconContainer}> |
||||
<Icon name="lock" size={22} color="white"/> |
||||
</View> |
||||
<View style={style.textContainer}> |
||||
<Text style={style.title}>Create custom pack</Text> |
||||
<Text style={style.description}> |
||||
Create your own custom pack with questions and task. It all depends |
||||
on your imagination! |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
</TouchableOpacity> |
||||
); |
||||
}; |
||||
const style = StyleSheet.create({ |
||||
container: { |
||||
backgroundColor: '#99EDCC', |
||||
borderRadius: 20, |
||||
padding: 16, |
||||
}, |
||||
textContainer: { |
||||
flex: 1, |
||||
}, |
||||
title: { |
||||
fontWeight: '600', |
||||
fontSize: 22, |
||||
lineHeight: 32, |
||||
color: '#2C205C', |
||||
}, |
||||
description: { |
||||
fontWeight: '400', |
||||
fontSize: 16, |
||||
lineHeight: 24, |
||||
color: '#2C205C', |
||||
}, |
||||
iconContainer: { |
||||
backgroundColor: colors.primaryColor, |
||||
padding: 10, |
||||
width: 50, |
||||
height: 50, |
||||
borderRadius: 20, |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
marginRight: 16, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,35 @@
@@ -0,0 +1,35 @@
|
||||
import React from 'react'; |
||||
import {Image, StyleSheet, Text, View} from 'react-native'; |
||||
|
||||
export const PackagesPageSeparator = () => { |
||||
return ( |
||||
<View style={style.container}> |
||||
<View style={style.imageContainer}> |
||||
<Image source={require('../../../assets/image/line.png')} /> |
||||
</View> |
||||
<Text style={style.text}>OR</Text> |
||||
<View style={style.imageContainer}> |
||||
<Image source={require('../../../assets/image/line.png')} /> |
||||
</View> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const style = StyleSheet.create({ |
||||
container: { |
||||
flex: 0, |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
justifyContent: 'space-between', |
||||
marginBottom: 20, |
||||
}, |
||||
imageContainer: { |
||||
width: 140, |
||||
overflow: 'hidden', |
||||
}, |
||||
text: { |
||||
textAlign: 'center', |
||||
color: '#9AC4F8', |
||||
fontSize: 14, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,82 @@
@@ -0,0 +1,82 @@
|
||||
import React, {FC} from 'react'; |
||||
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native'; |
||||
import {useTranslation} from 'react-i18next'; |
||||
import {Icon} from '../../shared'; |
||||
|
||||
interface IPackage { |
||||
title: string; |
||||
description: string; |
||||
image: JSX.Element; |
||||
} |
||||
|
||||
export const PackagesItem: FC<IPackage> = ({title, description, image}) => { |
||||
const {t, i18n} = useTranslation(); |
||||
return ( |
||||
<View style={style.container}> |
||||
<View style={style.flex}> |
||||
<View style={style.imgContainer}>{image}</View> |
||||
<View style={style.textContainer}> |
||||
<Text style={style.title}>{t(title)}</Text> |
||||
<Text style={style.description}>{t(description)}</Text> |
||||
</View> |
||||
</View> |
||||
<TouchableOpacity style={style.play} onPress={() => console.log('hello')}> |
||||
<Icon name="play" size={20} color="white" /> |
||||
</TouchableOpacity> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const style = StyleSheet.create({ |
||||
play: { |
||||
flex: 0, |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
backgroundColor: '#E36588', |
||||
borderRadius: 60, |
||||
width: 50, |
||||
height: 50, |
||||
position: 'absolute', |
||||
top: '50%', |
||||
right: -25, |
||||
transform: [{translateY: -10}], |
||||
}, |
||||
container: { |
||||
backgroundColor: '#2C205C', |
||||
borderRadius: 20, |
||||
paddingVertical: 16, |
||||
paddingLeft: 16, |
||||
position: 'relative', |
||||
width: '94%', |
||||
marginBottom: 16, |
||||
}, |
||||
flex: { |
||||
flex: 0, |
||||
flexDirection: 'row', |
||||
}, |
||||
title: { |
||||
fontWeight: '600', |
||||
fontSize: 22, |
||||
lineHeight: 32, |
||||
color: '#9AC4F8', |
||||
textTransform: 'capitalize', |
||||
}, |
||||
description: { |
||||
fontWeight: '400', |
||||
fontSize: 16, |
||||
lineHeight: 24, |
||||
color: '#7669C2', |
||||
}, |
||||
textContainer: { |
||||
width: 220, |
||||
marginLeft: 12, |
||||
alignItems: 'flex-start', |
||||
}, |
||||
imgContainer: { |
||||
backgroundColor: '#37296B', |
||||
width: 50, |
||||
height: 50, |
||||
borderRadius: 10, |
||||
overflow: 'hidden', |
||||
}, |
||||
}); |
||||
@ -0,0 +1,29 @@
@@ -0,0 +1,29 @@
|
||||
import React from 'react'; |
||||
import {StyleSheet, View} from 'react-native'; |
||||
import {DataPackage} from '../config/data-package.config'; |
||||
import {PackagesPageSeparator} from '../atoms/packages-page-separator.atom'; |
||||
import {PackagesItem} from './packages-item.component'; |
||||
import {CustomPackage} from '../atoms/create-custom-package.atom'; |
||||
|
||||
export const PackagesList = () => { |
||||
return ( |
||||
<View style={styles.container}> |
||||
{DataPackage.map((item, index) => ( |
||||
<PackagesItem |
||||
title={item.title} |
||||
description={item.description} |
||||
image={item.image} |
||||
key={index} |
||||
/> |
||||
))} |
||||
<PackagesPageSeparator /> |
||||
<CustomPackage /> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
}, |
||||
}); |
||||
@ -0,0 +1,39 @@
@@ -0,0 +1,39 @@
|
||||
import React from 'react'; |
||||
import {Image} from 'react-native'; |
||||
import {PackagesListLocale} from '../../../i18n/types/packages-list.types'; |
||||
const translatePath = ( |
||||
itemKey: keyof PackagesListLocale.Core, |
||||
key: keyof PackagesListLocale.IStep, |
||||
) => `packagesListTranslation.${itemKey}.${key}`; |
||||
export const DataPackage = [ |
||||
{ |
||||
title: translatePath('under18', 'title'), |
||||
description: translatePath('under18', 'description'), |
||||
image: ( |
||||
<Image |
||||
source={require('../../../assets/image/rabbit.png')} |
||||
style={{width: '100%', height: '100%'}} |
||||
/> |
||||
), |
||||
}, |
||||
{ |
||||
title: translatePath('light', 'title'), |
||||
description: translatePath('light', 'description'), |
||||
image: ( |
||||
<Image |
||||
source={require('../../../assets/image/feathers.png')} |
||||
style={{width: '100%', height: '100%'}} |
||||
/> |
||||
), |
||||
}, |
||||
{ |
||||
title: translatePath('crazy', 'title'), |
||||
description: translatePath('crazy', 'description'), |
||||
image: ( |
||||
<Image |
||||
source={require('../../../assets/image/hand.png')} |
||||
style={{width: '100%', height: '100%'}} |
||||
/> |
||||
), |
||||
}, |
||||
]; |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
export * from './components/packages-list'; |
||||
@ -1,2 +1,2 @@
@@ -1,2 +1,2 @@
|
||||
export * from './content-onBoarding.component'; |
||||
export * from './content-on-boarding.component'; |
||||
export * from './language-item.component'; |
||||
|
||||
@ -1,7 +1,7 @@
@@ -1,7 +1,7 @@
|
||||
import ImageHearts from '../../../assets/image/hearts.svg'; |
||||
import ImageGlass from '../../../assets/image/glass.svg'; |
||||
import ImageCup from '../../../assets/image/winners-cup.svg'; |
||||
import {OnBoardingLocale} from '../../../i18n/types/onBoarding.types'; |
||||
import {OnBoardingLocale} from '../../../i18n/types/on-boarding.types'; |
||||
const translatePath = ( |
||||
itemKey: keyof OnBoardingLocale.OnboardingSteps, |
||||
key: keyof OnBoardingLocale.IStep, |
||||
@ -1 +1 @@
@@ -1 +1 @@
|
||||
export * from './onBoardings-group'; |
||||
export * from './on-boardings-group'; |
||||
|
||||
@ -1,3 +1,3 @@
@@ -1,3 +1,3 @@
|
||||
export * from './language-select.screen'; |
||||
export * from './onBoarding.screen'; |
||||
export * from "./settings.screen" |
||||
export * from './on-boarding.screen'; |
||||
export * from './settings.screen'; |
||||
|
||||
@ -1,53 +0,0 @@
@@ -1,53 +0,0 @@
|
||||
import React, {FC} from 'react'; |
||||
import { |
||||
StyleSheet, |
||||
Text, |
||||
TouchableOpacity, |
||||
View, |
||||
ViewStyle, |
||||
} from 'react-native'; |
||||
import {colors} from '../../colors/colors'; |
||||
import {Icon} from '../icon/icon.component'; |
||||
interface IProps { |
||||
onPress: () => void; |
||||
style?: ViewStyle; |
||||
title?: string; |
||||
} |
||||
export const Header: FC<IProps> = ({onPress, style, title}) => { |
||||
return ( |
||||
<View style={styles.header}> |
||||
<TouchableOpacity onPress={onPress} style={styles.button}> |
||||
<Icon name="arrow" size={22} color={colors.secondaryColor} /> |
||||
</TouchableOpacity> |
||||
<Text style={styles.title}>{title}</Text> |
||||
<TouchableOpacity style={styles.button}> |
||||
<Icon name="inst" size={22} color={colors.secondaryColor} /> |
||||
</TouchableOpacity> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
header: { |
||||
width: '100%', |
||||
marginTop: 20, |
||||
marginBottom: 20, |
||||
flex: 0, |
||||
flexDirection: 'row', |
||||
alignContent: 'center', |
||||
justifyContent: 'space-between', |
||||
}, |
||||
title: { |
||||
fontSize: 24, |
||||
color: '#99EDCC', |
||||
fontWeight: 'bold', |
||||
}, |
||||
button: { |
||||
flex: 0, |
||||
width: 22, |
||||
height: 22, |
||||
alignSelf: 'center', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}, |
||||
}); |
||||
@ -1,7 +1,7 @@
@@ -1,7 +1,7 @@
|
||||
import React, {FC} from 'react'; |
||||
import {TouchableOpacity, ViewStyle} from 'react-native'; |
||||
import {colors} from '../../colors/colors'; |
||||
import {Icon} from '../../../shared'; |
||||
import {Icon} from '../../components/icon/icon.component'; |
||||
interface IProps { |
||||
onPress: () => void; |
||||
style?: ViewStyle; |
||||
@ -1,2 +1,2 @@
@@ -1,2 +1,2 @@
|
||||
export * from './goBack.component'; |
||||
export * from './go-back.component'; |
||||
export * from './primary-btn.component'; |
||||
|
||||
@ -0,0 +1,58 @@
@@ -0,0 +1,58 @@
|
||||
import React, {FC} from 'react'; |
||||
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; |
||||
import {colors} from '../../colors'; |
||||
import {Icon} from '../icon/icon.component'; |
||||
interface IProps { |
||||
onPressLeft?: () => any; |
||||
title?: string; |
||||
onPressRight?: () => any; |
||||
leftIcon?: string; |
||||
rightIcon?: string; |
||||
} |
||||
export const Header: FC<IProps> = ({ |
||||
onPressLeft, |
||||
leftIcon, |
||||
rightIcon, |
||||
title, |
||||
onPressRight, |
||||
}) => { |
||||
return ( |
||||
<View style={styles.header}> |
||||
{leftIcon && ( |
||||
<TouchableOpacity style={styles.button} onPress={onPressLeft}> |
||||
<Icon name={leftIcon} size={22} color={colors.secondaryColor} /> |
||||
</TouchableOpacity> |
||||
)} |
||||
<Text style={styles.title}>{title}</Text> |
||||
{rightIcon && ( |
||||
<TouchableOpacity style={styles.button} onPress={onPressRight}> |
||||
<Icon name={rightIcon} size={22} color={colors.secondaryColor} /> |
||||
</TouchableOpacity> |
||||
)} |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
header: { |
||||
marginTop: 20, |
||||
marginBottom: 35, |
||||
flex: 0, |
||||
flexDirection: 'row', |
||||
alignContent: 'center', |
||||
justifyContent: 'space-between', |
||||
}, |
||||
title: { |
||||
fontSize: 24, |
||||
color: '#99EDCC', |
||||
fontWeight: 'bold', |
||||
}, |
||||
button: { |
||||
flex: 0, |
||||
width: 22, |
||||
height: 22, |
||||
alignSelf: 'center', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}, |
||||
}); |
||||
@ -1,4 +1,4 @@
@@ -1,4 +1,4 @@
|
||||
export * from './buttons'; |
||||
export * from './layout/layout.component'; |
||||
export * from "./header/header.component" |
||||
export * from "./icon/icon.component" |
||||
export * from './icon/icon.component'; |
||||
export * from './header/header.component'; |
||||
|
||||
Loading…
Reference in new issue