<div className="grid grid-cols-2 gap-6 md:grid-cols-3 md:gap-8 lg:grid-cols-5"> {sections.map(({ icon, slug, title }) => ( <ButtonSelect icon={icon} key={slug} title={title} slug={slug} onClick={() => handleClick(slug)} selected={siteObjective === slug} /> ))} </div> </div> </div> </PageLayout> ); }; const ButtonSelect = ({ title, onClick, selected, icon, slug }) => ( <div data-test={`site-template-type-${slug}`} className={classNames( 'relative flex-1 cursor-pointer overflow-hidden rounded ring-offset-2 ring-offset-white focus-within:outline-none focus-within:ring-4 focus-within:ring-design-main focus-within:ring-offset-2 focus-within:ring-offset-white hover:outline-none hover:ring-4', { 'ring-4 ring-design-main ring-offset-2 ring-offset-white hover:ring-design-main': selected, 'hover:ring-gray-300': !selected, }, )} role="button" tabIndex={0} aria-label={__('Press to select', 'extendify-local')} aria-selected={selected} onKeyDown={(e) => { if (!['Enter', 'Space', ' '].includes(e.key)) return; e.preventDefault(); onClick(); }} onClick={onClick}> <div className="flex h-fit flex-col items-center rounded border border-gray-200"> <div className="flex w-full items-center justify-center bg-gray-100 px-8 py-6 md:px-14 md:py-8"> <Icon icon={icon} size="48" /> </div> <div className="flex items-center justify-center px-px py-3 text-base font-medium text-gray-900"> {title} </div> </div> </div> );