contributions

contributions.txs

function Contributions({items, handleSetShowContributions} : {items: any, handleSetShowContributions: (state: boolean) => void}) {
  const yearArray = Array.from(Array(365).keys())
  // console.log('yearArray', yearArray)
  // loop through items and create an array of days of the year with the number of items created on that day
  const contributions = yearArray.map((day: number) => {
    const date = new Date()
    date.setDate(date.getDate() - day)
    const dateString = date.toISOString().substring(0, 10)
    const itemsCreatedOnDate = items.filter((item: any) => {
      return item.createdAt.toISOString().substring(0, 10) === dateString
    })
    return {
      date: dateString,
      count: itemsCreatedOnDate.length
    }
  })



  return (
    <div className={`absolute right-0 bottom-0 p-4`}>
      <div onClick={() => handleSetShowContributions(false)}>hide</div>
      <div className={`grid grid-rows-6 grid-flow-col gap-1`}>
        {contributions.reverse().map(({ count, date } :any) => {
          return(
            <DaySquare
            count={count}
            date={date}
            key={nanoid()}
            />
          )
        })}
      </div>
    </div>
  )
}

function DaySquare({count, date}: {count: number, date: string}){
  const [showTooltip, setShowTooltip] = useState<boolean>(false)
  let hue = 0

  if (count > 0) {
    switch (count){
      case 1:
        hue = 50
        break
      case 2:
        hue = 100
        break
      case 3:
        hue = 200
        break
      case 4:
        hue = 300
        break
      case 5:
        hue = 400
        break
      case 6:
        hue = 500
        break
      default:
        hue = 600
        break
    }
  }

  const thing = hue === 0 ? `bg-gray-200`: `bg-red-${hue}`

  return(
    <div
      className={`relative w-2 h-2 ${thing}`}
      onMouseOver={() => setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
    >
      {showTooltip &&
        <div className={`
          absolute bg-gray-600 text-white z-10
          -translate-y-10 w-max p-2 -translate-x-1/2
          rounded text-xs
        `}>
          {count} contributions on {date}
        </div>
      }
    </div>
  )
}

CleanShot.2022-09-23.at.18.04.53.mp4