scoreBox.jsx

//-------------------------------------------------------------------------------------------------------------------------------------------------------
//  scoreBox.jsx
//
//  Purpose: Component created for the scoreBox element which displays the current total score for the respective team
//      loc: MainContainer              dep: useEffect, useState, away-score, away-total, home-score, home-total
//
//  JT,JG
//  6/30/2024
//-------------------------------------------------------------------------------------------------------------------------------------------------------



import { useEffect, useState } from 'react'

export default function ScoreBox( { teamName, score }) {
  return (
    <>
      <div id="away-score" className="relative bg-green-900 min-w-max border-black text-white text-center py-4 rounded-md shadow-lg border-2 px-5 w-32">
        <div className="text-lg font-bold pb-3">{teamName}</div>
        <div id="away-total" className="text-5xl font-extrabold">{score}</div>
        <div className="absolute top-10 left-3 right-3 h-0.5 bg-white"></div>
      </div>
    </>
  )
}