{"size": 2624, "ext": "js", "max_stars_repo_path": "assets/js/components/PreviewBlock.js", "max_stars_repo_name": "eugene-manuilov/site-kit-wp", "max_stars_repo_stars_event_min_datetime": "2019-06-12T05:11:29.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-22T19:35:13.000Z", "max_issues_repo_path": "assets/js/components/PreviewBlock.js", "max_issues_repo_name": "eugene-manuilov/site-kit-wp", "max_issues_repo_issues_event_min_datetime": "2019-06-19T17:41:31.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T23:35:11.000Z", "max_forks_repo_path": "assets/js/components/PreviewBlock.js", "max_forks_repo_name": "eugene-manuilov/site-kit-wp", "max_forks_repo_forks_event_min_datetime": "2019-06-19T18:01:06.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-05T13:19:56.000Z"}
{"max_stars_count": 1191, "max_issues_count": 4121, "max_forks_count": 272, "avg_line_length": 22.0504201681, "max_line_length": 75, "alphanum_fraction": 0.7027439024}
/**
 * PreviewBlock component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import classnames from 'classnames';

/**
 * Internal dependencies
 */
import { useBreakpoint } from '../hooks/useBreakpoint';

function PreviewBlock( {
	className,
	width,
	height,
	shape,
	padding,
	smallWidth,
	smallHeight,
	tabletWidth,
	tabletHeight,
	desktopWidth,
	desktopHeight,
} ) {
	const breakpoint = useBreakpoint();

	let blockWidth = width;
	let blockHeight = height;

	if ( 'small' === breakpoint && smallWidth && smallHeight ) {
		blockWidth = smallWidth;
		blockHeight = smallHeight;
	}

	if ( 'tablet' === breakpoint && tabletWidth && tabletHeight ) {
		blockWidth = tabletWidth;
		blockHeight = tabletHeight;
	}

	if (
		( 'xlarge' === breakpoint || 'desktop' === breakpoint ) &&
		desktopWidth &&
		desktopHeight
	) {
		blockWidth = desktopWidth;
		blockHeight = desktopHeight;
	}

	return (
		<div
			className={ classnames( 'googlesitekit-preview-block', className, {
				'googlesitekit-preview-block--padding': padding,
			} ) }
			style={ {
				width: blockWidth,
				height: blockHeight,
			} }
		>
			<div
				className={ classnames(
					'googlesitekit-preview-block__wrapper',
					{
						'googlesitekit-preview-block__wrapper--circle':
							shape === 'circular',
					}
				) }
			></div>
		</div>
	);
}

PreviewBlock.propTypes = {
	className: PropTypes.string,
	width: PropTypes.string,
	height: PropTypes.string,
	shape: PropTypes.string,
	padding: PropTypes.bool,
	smallWidth: PropTypes.string,
	smallHeight: PropTypes.string,
	tabletWidth: PropTypes.string,
	tabletHeight: PropTypes.string,
	desktopWidth: PropTypes.string,
	desktopHeight: PropTypes.string,
};

PreviewBlock.defaultProps = {
	className: undefined,
	width: '100px',
	height: '100px',
	shape: 'square',
	padding: false,
	smallWidth: undefined,
	smallHeight: undefined,
	tabletWidth: undefined,
	tabletHeight: undefined,
	desktopWidth: undefined,
	desktopHeight: undefined,
};

export default PreviewBlock;
