<commit_before>import React from 'react'
import { createStyles } from '@material-ui/core/styles'
import { registerComponent, Components } from '../../lib/vulcan-lib';
import { SECTION_WIDTH } from '../common/SingleColumnSection';
import { cloudinaryCloudNameSetting } from '../../lib/publicSettings';

const bannerHeight = 250
const mobileImageId = 'Banner/Smallpox_Eradication_Day-17.png'
const desktopImageId = 'Banner/Smallpox_Eradication_Day-16.png'

const mobileImage = `https://res.cloudinary.com/${cloudinaryCloudNameSetting.get()}/image/upload/w_${SECTION_WIDTH},h_${bannerHeight}/${mobileImageId}`
const desktopImage = `https://res.cloudinary.com/${cloudinaryCloudNameSetting.get()}/image/upload/w_${SECTION_WIDTH},h_${bannerHeight}/${desktopImageId}`
// const srcset = `${mobileImage} `

const styles = createStyles((theme: ThemeType): JssStyles => ({
  image: {
    objectFit: 'cover'
  }
}))

const SmallpoxBanner = ({ classes }) => {
  const { SingleColumnSection } = Components
  
  return <SingleColumnSection>
    <picture>
      {/* 960px is the md boundary */}
      <source media="(max-width: 959px)" srcSet={mobileImage} />
      <source media="(min-width: 960px)" srcSet={desktopImage} />
      <img
        className={classes.image}
        src={desktopImage}
        height={bannerHeight}
        width='100%'
      />
    </picture>
  </SingleColumnSection>
}

const SmallpoxBannerComponent = registerComponent(
  'SmallpoxBanner', SmallpoxBanner, {styles},
)

declare global {
  interface ComponentTypes {<commit_msg>no img tag srcset, no commenting it out either<commit_after>import React from 'react'
import { createStyles } from '@material-ui/core/styles'
import { registerComponent, Components } from '../../lib/vulcan-lib';
import { SECTION_WIDTH } from '../common/SingleColumnSection';
import { cloudinaryCloudNameSetting } from '../../lib/publicSettings';

const bannerHeight = 250
const mobileImageId = 'Banner/Smallpox_Eradication_Day-17.png'
const desktopImageId = 'Banner/Smallpox_Eradication_Day-16.png'

const mobileImage = `https://res.cloudinary.com/${cloudinaryCloudNameSetting.get()}/image/upload/w_${SECTION_WIDTH},h_${bannerHeight}/${mobileImageId}`
const desktopImage = `https://res.cloudinary.com/${cloudinaryCloudNameSetting.get()}/image/upload/w_${SECTION_WIDTH},h_${bannerHeight}/${desktopImageId}`

const styles = createStyles((theme: ThemeType): JssStyles => ({
  image: {
    objectFit: 'cover'
  }
}))

const SmallpoxBanner = ({ classes }) => {
  const { SingleColumnSection } = Components
  
  return <SingleColumnSection>
    <picture>
      {/* 960px is the md boundary */}
      <source media="(max-width: 959px)" srcSet={mobileImage} />
      <source media="(min-width: 960px)" srcSet={desktopImage} />
      <img
        className={classes.image}
        src={desktopImage}
        height={bannerHeight}
        width='100%'
      />
    </picture>
  </SingleColumnSection>
}

const SmallpoxBannerComponent = registerComponent(
  'SmallpoxBanner', SmallpoxBanner, {styles},
)

declare global {
  interface ComponentTypes {
{'fraction_non_alphanumeric': 0.14638104511522232, 'fraction_numerical': 0.012333657903278157, 'mean_word_length': 4.4548672566371685, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '977725', 'n_tokens_mistral': 983, 'n_tokens_neox': 962, 'n_words': 177}