<commit_before>import { Box, Image, Sans, Spacer, color } from "@artsy/palette"
import { ArtistSeriesItem_artistSeries } from "v2/__generated__/ArtistSeriesItem_artistSeries.graphql"
import { RouterLink } from "v2/Artsy/Router/RouterLink"
import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"

interface Props {
  artistSeries: ArtistSeriesItem_artistSeries
  lazyLoad: boolean
}

export const ArtistSeriesItem: React.SFC<Props> = props => {
  const {
    artistSeries: { slug, title, image, artworksCountMessage },
    lazyLoad,
  } = props

  return (
    <Box border="1px solid" borderColor="black10" borderRadius="2px">
      <StyledLink to={`/artist-series/${slug}`}>
        <SeriesImage
          src={image.cropped.url}
          alt={title}
          lazyLoad={lazyLoad}
          width={160}
          style={{ objectFit: "cover", objectPosition: "center" }}
        />
        <Box my={1} mx="15px">
          <SeriesTitle size={"3"}>{title}</SeriesTitle>
          <Spacer />
          <Sans size={"3"} color={"black60"}>
            {artworksCountMessage}
          </Sans>
        </Box>
      </StyledLink>
    </Box>
  )
}

const SeriesTitle = styled(Sans)`<commit_msg>Use standard spacing<commit_after>import { Box, Image, Sans, Spacer, color } from "@artsy/palette"
import { ArtistSeriesItem_artistSeries } from "v2/__generated__/ArtistSeriesItem_artistSeries.graphql"
import { RouterLink } from "v2/Artsy/Router/RouterLink"
import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"

interface Props {
  artistSeries: ArtistSeriesItem_artistSeries
  lazyLoad: boolean
}

export const ArtistSeriesItem: React.SFC<Props> = props => {
  const {
    artistSeries: { slug, title, image, artworksCountMessage },
    lazyLoad,
  } = props

  return (
    <Box border="1px solid" borderColor="black10" borderRadius="2px">
      <StyledLink to={`/artist-series/${slug}`}>
        <SeriesImage
          src={image.cropped.url}
          alt={title}
          lazyLoad={lazyLoad}
          width={160}
          style={{ objectFit: "cover", objectPosition: "center" }}
        />
        <Box my={1} mx={2}>
          <SeriesTitle size={"3"}>{title}</SeriesTitle>
          <Spacer />
          <Sans size={"3"} color={"black60"}>
            {artworksCountMessage}
          </Sans>
        </Box>
      </StyledLink>
    </Box>
  )
}

const SeriesTitle = styled(Sans)`
{'fraction_non_alphanumeric': 0.13481363996827914, 'fraction_numerical': 0.012291831879460745, 'mean_word_length': 3.0891410048622365, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 0, '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': '3015652', 'n_tokens_mistral': 812, 'n_tokens_neox': 805, 'n_words': 167}