<commit_before>import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { MyBidsBidItem_saleArtwork } from "v2/__generated__/MyBidsBidItem_saleArtwork.graphql"

import {
  ArrowDownCircleIcon,
  ArrowUpCircleIcon,
  Box,
  Flex,
  Image,
  Spacer,
  Text,
  WatchingIcon,
} from "@artsy/palette"
import { RouterLink } from "v2/Artsy/Router/RouterLink"

interface MyBidsBidItemProps {
  saleArtwork: MyBidsBidItem_saleArtwork
}

export const MyBidsBidItem: React.FC<MyBidsBidItemProps> = ({
  saleArtwork,
}) => {
  return (
    <RouterLink to={`/artwork/${saleArtwork.slug}`} noUnderline>
      <Flex width="100%">
        <Flex alignItems="center" width="100%">
          <Box backgroundColor="black60" width={50} height={50}>
            {saleArtwork.artwork.image && (
              <Image
                src={saleArtwork.artwork.image.resized.src}
                srcSet={saleArtwork.artwork.image.resized.srcSet}
              />
            )}
          </Box>
          <Spacer mr={1} />
          <Flex justifyContent="space-between" width="100%">
            <Box>
              <Text variant="text">{saleArtwork.artwork.artistNames}</Text>
              <Text variant="caption" color="black60">
                Lot {saleArtwork.position}
              </Text>
            </Box>

            <Box>
              {saleArtwork.isWatching ? (
                <>
                  <Text variant="text" display="inline-block" pr={0.3}>
                    {saleArtwork.highestBid.amount || saleArtwork.estimate}
                  </Text>
                  <Watching />
                </>
              ) : (
                <>
                  <Box style={{ whiteSpace: "nowrap" }}>
                    <Text variant="text" display="inline-block" pr={0.3}>
                      {saleArtwork.lot.sellingPrice.display}
                    </Text>
                    <Text color="black60" display="inline-block">
                      {saleArtwork.lot.bidCount === 1
                        ? `${saleArtwork.lot.bidCount} bid`
                        : `${saleArtwork.lot.bidCount} bids`}
                    </Text>
                  </Box>

                  {saleArtwork.isHighestBidder ? <HighestBid /> : <Outbid />}
                </>
              )}
            </Box>
          </Flex>
        </Flex>
      </Flex>
    </RouterLink>
  )
}

export const MyBidsBidItemFragmentContainer = createFragmentContainer(
  MyBidsBidItem,
  {
    saleArtwork: graphql`
      fragment MyBidsBidItem_saleArtwork on SaleArtwork {
        artwork {
          artistNames
          image {
            resized(width: 50, height: 50) {
              src
              srcSet
            }
          }
        }
        estimate
        highestBid {
          amount
        }
        isHighestBidder
        isWatching
        lotState {
          bidCount
          sellingPrice {
            display
          }
        }
        position
        slug
      }
    `,
  }
)

const HighestBid: React.FC = () => (
  <Flex>
    <Box pr={0.3}>
      <ArrowUpCircleIcon fill="green100" />
    </Box>
    <Text variant="text" color="green100">
      Highest bid
    </Text>
  </Flex>
)

const Outbid: React.FC = () => (
  <Flex>
    <Box pr={0.3}>
      <ArrowDownCircleIcon fill="red100" />
    </Box>
    <Text variant="text" color="red100">
      Outbid
    </Text>
  </Flex>
)

const Watching: React.FC = () => (
  <Flex>
    <Box pr={0.3}>
      <WatchingIcon width={12} height={12} top="1px" />
    </Box>
    <Text variant="text" color="black60">
      Watching
    </Text>
  </Flex>
)
<commit_msg>fix: Fix type error<commit_after>import React from "react"
import { createFragmentContainer, graphql } from "react-relay"
import { MyBidsBidItem_saleArtwork } from "v2/__generated__/MyBidsBidItem_saleArtwork.graphql"

import {
  ArrowDownCircleIcon,
  ArrowUpCircleIcon,
  Box,
  Flex,
  Image,
  Spacer,
  Text,
  WatchingIcon,
} from "@artsy/palette"
import { RouterLink } from "v2/Artsy/Router/RouterLink"

interface MyBidsBidItemProps {
  saleArtwork: MyBidsBidItem_saleArtwork
}

export const MyBidsBidItem: React.FC<MyBidsBidItemProps> = ({
  saleArtwork,
}) => {
  return (
    <RouterLink to={`/artwork/${saleArtwork.slug}`} noUnderline>
      <Flex width="100%">
        <Flex alignItems="center" width="100%">
          <Box backgroundColor="black60" width={50} height={50}>
            {saleArtwork.artwork.image && (
              <Image
                src={saleArtwork.artwork.image.resized.src}
                srcSet={saleArtwork.artwork.image.resized.srcSet}
              />
            )}
          </Box>
          <Spacer mr={1} />
          <Flex justifyContent="space-between" width="100%">
            <Box>
              <Text variant="text">{saleArtwork.artwork.artistNames}</Text>
              <Text variant="caption" color="black60">
                Lot {saleArtwork.position}
              </Text>
            </Box>

            <Box>
              {saleArtwork.isWatching ? (
                <>
                  <Text variant="text" display="inline-block" pr={0.3}>
                    {saleArtwork.highestBid.amount || saleArtwork.estimate}
                  </Text>
                  <Watching />
                </>
              ) : (
                <>
                  <Box style={{ whiteSpace: "nowrap" }}>
                    <Text variant="text" display="inline-block" pr={0.3}>
                      {saleArtwork.lotState.sellingPrice.display}
                    </Text>
                    <Text color="black60" display="inline-block">
                      {saleArtwork.lotState.bidCount === 1
                        ? `${saleArtwork.lotState.bidCount} bid`
                        : `${saleArtwork.lotState.bidCount} bids`}
                    </Text>
                  </Box>

                  {saleArtwork.isHighestBidder ? <HighestBid /> : <Outbid />}
                </>
              )}
            </Box>
          </Flex>
        </Flex>
      </Flex>
    </RouterLink>
  )
}

export const MyBidsBidItemFragmentContainer = createFragmentContainer(
  MyBidsBidItem,
  {
    saleArtwork: graphql`
      fragment MyBidsBidItem_saleArtwork on SaleArtwork {
        artwork {
          artistNames
          image {
            resized(width: 50, height: 50) {
              src
              srcSet
            }
          }
        }
        estimate
        highestBid {
          amount
        }
        isHighestBidder
        isWatching
        lotState {
          bidCount
          sellingPrice {
            display
          }
        }
        position
        slug
      }
    `,
  }
)

const HighestBid: React.FC = () => (
  <Flex>
    <Box pr={0.3}>
      <ArrowUpCircleIcon fill="green100" />
    </Box>
    <Text variant="text" color="green100">
      Highest bid
    </Text>
  </Flex>
)

const Outbid: React.FC = () => (
  <Flex>
    <Box pr={0.3}>
      <ArrowDownCircleIcon fill="red100" />
    </Box>
    <Text variant="text" color="red100">
      Outbid
    </Text>
  </Flex>
)

const Watching: React.FC = () => (
  <Flex>
    <Box pr={0.3}>
      <WatchingIcon width={12} height={12} top="1px" />
    </Box>
    <Text variant="text" color="black60">
      Watching
    </Text>
  </Flex>
)

{'fraction_non_alphanumeric': 0.12855969331872946, 'fraction_numerical': 0.01533406352683461, 'mean_word_length': 1.586756373937677, 'pattern_counts': {'":': 0, '<': 117, '<?xml version=': 0, '>': 125, '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': '3224112', 'n_tokens_mistral': 2409, 'n_tokens_neox': 2246, 'n_words': 379}