Sha256: 308a87314c10607174c9a98bdcdccffac380fddc5af7f4d8b81768b5be3cbbb1

Contents?: true

Size: 786 Bytes

Versions: 27

Compression:

Stored size: 786 Bytes

Contents

import React from 'react'
import { noop } from 'lodash'
import classnames from 'classnames'
import Image from '../../pb_image/_image'

type ThumbnailType = {
  active?: boolean,
  alt?: string,
  onClick: () => void,
  buttonRef?: React.RefObject<HTMLButtonElement>,
  url: string,
  width?: string,
}

export default function Thumbnail({
  active = false,
  alt,
  width,
  url,
  onClick = noop,
  buttonRef,
}: ThumbnailType): React.ReactElement {
  const activeClasses = classnames('Thumbnail', { active })
  return (
    <button
        className={classnames(activeClasses)}
        onClick={onClick}
        ref={buttonRef}
        style={{ width }}
        type="button"
    >
      <Image
          alt={alt}
          size="sm"
          url={url}
      />
    </button>
  )
}

Version data entries

27 entries across 27 versions & 1 rubygems

Version Path
playbook_ui-11.7.0.pre.alpha.table1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.7.0 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.6.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.5.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.7.0.pre.alpha.pre.guagechart1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.6.0 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.5.0.pre.alpha.datepicker1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.6.0.pre.alpha.rubocopperf1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.6.1.pre.alpha.rubocop.pre.performance1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.5.0.pre.alpha.pre.rubocop app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.6.0.pre.alpha.momenttz1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.5.0 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.4.0.pre.alpha.rubytheme2 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.4.0.pre.alpha.rubytheme1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.4.0 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.3.0.pre.alpha2 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.3.0.pre.alpha1 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.3.0 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.2.7 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
playbook_ui-11.2.6 app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx