inningScore.jsx

//--------------------------------------------------------------------------------------------------------------------------------------
//  inningBox.jsx
//
//  Purpose: Component created for the inningBox element which displays the current inning along with its corresponding indicatior
//      loc: MainContainer              dep: useEffect, useState,
//                                      inning, inningNum, isTop, arrow-box, top-arrow, bottom-arrow(hidden)
//
//  JT,JG
//  6/30/2024
//---------------------------------------------------------------------------------------------------------------------------------------
import { useEffect, useState } from 'react'

export default function InningBox( { inningNum, isTop }) {
  return (
    <>
      <div className="p-4 text-xl" id="inning">
        <div className="text-sm pt-10">Inning {inningNum}</div>
        <div className=" bg-green-900 flex flex-col items-center justify-center rounded-md text-white text-center text-3xl border-black">
          <div id="inning" className="p-2 text-xl flex items-center justify-center space">
            <div className="flex flex-row items-center space-x-5">
              {/* <!-- Arrow Box --> */}
              <div className="" id="arrow-box">
                <div className="text-2xl" id="top-arrow">▲</div>
                <div className="text-2xl hidden" id="bottom-arrow">▼</div>
              </div>
              {/* <!-- Inning Number --> */}
              <div className="text-2xl" id="inning-number">1</div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}