|
@@ -1,11 +1,61 @@
|
|
|
import React from 'react';
|
|
|
-import { View, Text } from 'react-native';
|
|
|
+
|
|
|
+import { Colors } from '../../../theme';
|
|
|
+import { PageWrapper, MenuButton } from '../../../components';
|
|
|
+
|
|
|
+import { MenuButtonType } from '../../../types/components';
|
|
|
+
|
|
|
+import FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
|
|
|
+import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
|
|
|
+import MapLocationIcon from '../../../../assets/icons/travels-section/map-location.svg';
|
|
|
+import SeriesIcon from '../../../../assets/icons/travels-section/series.svg';
|
|
|
+import EarthIcon from '../../../../assets/icons/travels-section/earth.svg';
|
|
|
+import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
|
|
|
+import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';
|
|
|
+
|
|
|
+const buttons: MenuButtonType[] = [
|
|
|
+ {
|
|
|
+ label: 'Countries',
|
|
|
+ icon: <FlagsIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Regions',
|
|
|
+ icon: <RegionsIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'DARE',
|
|
|
+ icon: <MapLocationIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Series',
|
|
|
+ icon: <SeriesIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Earth',
|
|
|
+ icon: <EarthIcon fill={Colors.DARK_BLUE} width={20} height={20} />
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Trips',
|
|
|
+ icon: <TripIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Photos',
|
|
|
+ icon: <ImagesIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
|
|
|
+ },
|
|
|
+];
|
|
|
|
|
|
const TravelsScreen = () => {
|
|
|
return (
|
|
|
- <View>
|
|
|
- <Text>Travels Screen</Text>
|
|
|
- </View>
|
|
|
+ <PageWrapper>
|
|
|
+ {buttons.map((button, index) => (
|
|
|
+ <MenuButton
|
|
|
+ label={button.label}
|
|
|
+ icon={button.icon}
|
|
|
+ buttonFn={button.buttonFn}
|
|
|
+ key={'travels-button-' + index}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+ </PageWrapper>
|
|
|
);
|
|
|
};
|
|
|
|