time-in-color.tsx

time-in-color.tsx

import React, { useState } from 'react'

export default function Home() {
  const colors : string[] = ["bg-emerald-500", "bg-red-500", "bg-yellow-500", "bg-emerald-800", "bg-emerald-900"]

  return (
    <div className={"h-screen"}>
      <ColorBox
        colors={colors}
      />
    </div>
  )
}

type ColorBoxProps = {
  colors: string[]
}

function ColorBox({colors} : ColorBoxProps){
  console.log({colors})

  const [color, setColor] = useState<string>(colors[0])
  // map through the colors array and return a div for each color

  const colorBoxes = colors.map((color) => {
    return (
      <div className={`h-screen + ${color}`}>

      </div>
    )
  })


  const start = Date.now();

  console.log('starting timer...');

  setTimeout(() => {
    const millis = Date.now() - start;

    console.log(`seconds elapsed = ${Math.floor(millis / 1000)}`);
    setColor(colors[1])

    // Expected output: "seconds elapsed = 2"
  }, 2000);






  return (
    <div className={`h-screen + ${color}`}>
      color box
    </div>
  )


}