{"size": 1348, "ext": "js", "max_stars_repo_path": "pattern-single-panel-redux/src/views/MainPanel.js", "max_stars_repo_name": "niceahn/samples", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "pattern-single-panel-redux/src/views/MainPanel.js", "max_issues_repo_name": "niceahn/samples", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "pattern-single-panel-redux/src/views/MainPanel.js", "max_forks_repo_name": "niceahn/samples", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.9230769231, "max_line_length": 109, "alphanum_fraction": 0.7114243323}
import React from 'react';
import kind from '@enact/core/kind';
import {Panel, Header} from '@enact/moonstone/Panels';

import car from '../../assets/images/car.jpeg';
import city from '../../assets/images/city.jpeg';
import FooterContainer from '../containers/FooterContainer';
import mural from '../../assets/images/mural.jpeg';
import PhotoPickerContainer from '../containers/PhotoPickerContainer';
import PhotoPreviewContainer from '../containers/PhotoPreviewContainer';
import PhotoSliderContainer from '../containers/PhotoSliderContainer';
import spaceShuttle from '../../assets/images/space-shuttle.jpg';
import violin from '../../assets/images/violin.jpeg';

import css from './MainPanel.module.less';

const imageNames = [
	'mural',
	'violin',
	'car',
	'city',
	'spaceShuttle'
];
const imageURLs = [
	mural,
	violin,
	car,
	city,
	spaceShuttle
];

const MainPanel = kind({
	name: 'MainPanel',

	render: (props) => (
		<Panel {...props}>
			<Header title="Profile Photo" titleBelow="Choose your profile picture" type="compact" casing="preserve" />
			<div className={css.profilePhotoPicker}>
				<PhotoPreviewContainer imageURLs={imageURLs} />
				<PhotoSliderContainer />
				<PhotoPickerContainer
					imageNames={imageNames}
					imageURLs={imageURLs}
				/>
			</div>
			<FooterContainer />
		</Panel>
	)
});

export default MainPanel;
