define([], function() { return "/* tslint:disable:no-unused-variable */\r\nimport * as React from 'react';\r\n/* tslint:enable:no-unused-variable */\r\n\r\nimport { createArray } from '@uifabric/utilities';\r\nimport { FocusZone, Image } from '../../../../index';\r\nimport './FocusZone.Photos.Example.scss';\r\n\r\nconst PHOTOS = createArray(25, () => {\r\n  const randomWidth = 50 + Math.floor(Math.random() * 150);\r\n\r\n  return {\r\n    url: `http://placehold.it/${randomWidth}x100`,\r\n    width: randomWidth,\r\n    height: 100\r\n  };\r\n});\r\n\r\nexport const FocusZonePhotosExample = () => (\r\n  <FocusZone>\r\n    <ul className='ms-FocusZoneExamples-photoList'>\r\n      { PHOTOS.map((photo, index) => (\r\n        <div\r\n          key={ index }\r\n          className='ms-FocusZoneExamples-photoCell'\r\n          data-is-focusable={ true }\r\n          onClick={ () => console.log('clicked') }>\r\n          <Image src={ photo.url } width={ photo.width } height={ photo.height } />\r\n        </div>\r\n      )) }\r\n    </ul>\r\n  </FocusZone>\r\n);\r\n"; });