import { useLocation } from '@reach/router';
import Kit from '../models/kit';
import KitListItem from './kit-list-item';
import NewPageKitListItem from '../../../../onboarding/assets/js/components/new-page-kit-list-item';
import { CssGrid } from '@elementor/app-ui';
export default function KitList( props ) {
const location = useLocation();
const referrer = new URLSearchParams( location.pathname.split( '?' )?.[ 1 ] ).get( 'referrer' );
return (
<CssGrid spacing={ 24 } colMinWidth={ 290 }>
{
'onboarding' === referrer &&
<NewPageKitListItem />
}
{
props.data.map( ( model, index ) => (
// The + 1 was added in order to start the map.index from 1 and not from 0.
<KitListItem key={ model.id } model={ model } index={ index + 1 } queryParams={ props.queryParams?.search } source={ props.source } />
) )
}
</CssGrid>
);
}
KitList.propTypes = {
data: PropTypes.arrayOf( PropTypes.instanceOf( Kit ) ),
queryParams: PropTypes.shape( {
search: PropTypes.string,
} ),
source: PropTypes.string,
};