import React from 'react'
import { HashRouter as Router } from 'react-router-dom'
import mockedSearchResults from '../../../../../__mocks__/premiumTemplateKits'
import SearchResultItem from './SearchResultItem'

export default { title: 'search/Template Kits' }

export const searchResultWithGallery = () => {
  const mockSearchResult = mockedSearchResults.results.search_query_result.search_payload.items[1]
  return (
    <Router>
      <div style={{ width: '500px' }}>
        <SearchResultItem item={mockSearchResult} />
      </div>
    </Router>
  )
}
export const searchResultWithSingleImage = () => {
  const mockSearchResult = mockedSearchResults.results.search_query_result.search_payload.items[0]
  return (
    <Router>
      <div style={{ width: '500px' }}>
        <SearchResultItem item={mockSearchResult} />
      </div>
    </Router>
  )
}
import React, { useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { useStateValue } from '../../../../store/store';
import ChangeTemplate from '../../../../components/change-template';

const SiteColors = () => {
	const [ { builder }, dispatch ] = useStateValue();
	useEffect( () => {
		dispatch( {
			type: 'set',
			designStep: 2,
		} );
	}, [] );

	return (
		<>
			<ChangeTemplate />
			<div className="customizer-header">
				<div className="header-name">
					<h3 className="ist-customizer-heading">
						{ builder === 'beaver-builder' || builder === 'brizy'
							? __( 'Fonts', 'astra-sites' )
							: __( 'Colors & Fonts', 'astra-sites' ) }
					</h3>
					<p className="screen-description">
						{ __(
							'Choose colors and fonts for your site. You can update them anytime later.',
							'astra-sites'
						) }
					</p>
				</div>
			</div>
		</>
	);
};

export default SiteColors;