<commit_before>import React from 'react'
import { Box, Flex } from 'blockstack-ui'
import { Image } from '@components/v2/image'

const PhotoItem = ({
  src,
  backgroundPosition,
  backgroundSize,
  height = 400,
  ...rest
}) => {
  return (
    <Flex position="relative" width={1} {...rest}>
      <Box p={1} position="relative" width={1}>
        <Image
          bgImg={src}
          height={height}
          imgix={{
            w: 1800
          }}
          backgroundPosition={backgroundPosition}
          backgroundSize={backgroundSize}
        />
      </Box>
    </Flex>
  )
}

const PhotoGrid = ({ items, height = 400, ...rest }) => {
  return (
    <Flex px={1} flexWrap="wrap" width="100%" {...rest}>
      {items.map(({ src, width = 1 / 3, ...photoProps }, key, arr) => (
        <PhotoItem
          width={[1, 1 / 2, 1 / 2, width]}
          src={src}
          key={key}
          height={height}
          {...photoProps}
        />
      ))}
    </Flex>
  )
}

export { PhotoGrid, PhotoItem }<commit_msg>mobile animation version for photo grid<commit_after>import React, { useState, useEffect } from 'react'
import { Box, Flex } from 'blockstack-ui'
import { useTransition, animated, config } from 'react-spring'
import { Image } from '@components/v2/image'

const MobileVersion = ({ items, ...rest }) => {
  const [index, set] = useState(0)
  const itemsWithKeys = items.map((item, key) => ({
    ...item,
    key
  }))
  const transitions = useTransition(itemsWithKeys[index], (item) => item.key, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: config.molasses
  })

  const delay = itemsWithKeys.length > 3 ? 3200 : 4200
  useEffect(
    () =>
      void setInterval(
        () => set((state) => (state + 1) % itemsWithKeys.length),
        delay
      ),
    []
  )
  return (
    <Box position="relative" bg="ink.50" width={1} height={300}>
      {transitions.map(({ item, props, key }) => (
        <Box
          is={animated.div}
          key={key}
          size="100%"
          position="absolute"
          left={0}
          top={0}
          backgroundSize="cover"
          backgroundImage={`url(${item.src}?w=960&auto=format)`}
          backgroundPosition="center center"
          transform="translate3d(0,0,0)"
          style={{
            ...props
          }}
        />
      ))}
    </Box>
  )
}

const PhotoItem = ({
  src,
  backgroundPosition,
  backgroundSize,
  height = 400,
  ...rest
}) => {
  return (
    <Flex position="relative" width={1} {...rest}>
      <Box p={1} position="relative" width={1}>
        <Image
          bgImg={src}
          height={height}
          imgix={{
            w: 1800
          }}
          backgroundPosition={backgroundPosition}
          backgroundSize={backgroundSize}
        />
      </Box>
    </Flex>
  )
}

const PhotoGrid = ({ items, height = 400, ...rest }) => {
  return (
    <>
      <Box display={['block', 'block', 'none']}>
        <MobileVersion items={items} />
      </Box>
      <Flex
        display={['none', 'none', 'flex']}
        px={1}
        flexWrap="wrap"
        width="100%"
        {...rest}
      >
        {items.map(({ src, width = 1 / 3, ...photoProps }, key, arr) => (
          <PhotoItem
            width={[1, 1 / 2, 1 / 2, width]}
            src={src}
            key={key}
            height={height}
            {...photoProps}
          />
        ))}
      </Flex>
    </>
  )
}

export { PhotoGrid, PhotoItem }
{'fraction_non_alphanumeric': 0.17152658662092624, 'fraction_numerical': 0.023441966838193252, 'mean_word_length': 1.8633387888707038, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 41, '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': '2957050', 'n_tokens_mistral': 1153, 'n_tokens_neox': 1085, 'n_words': 242}