Race Track - Copy this React, Tailwind Component to your project

import-React,-{-useState,-useEffect-}-from-'react';-interface-RaceTrackProps-{}-const-RaceTrack:-React.FC<RaceTrackProps>-=-()-=>-{-const-numbers-=-[-1,-20,-14,-31,-9,-22,-18,-29,-7,-28,-12,-35,-3,-26,-32,-15,-19,-4,-33,-16,-24,-5,-10,-23,-8,-30,-11,-36,-13,-27,-6,-34,-17,-25,-2,-21,-];-const-grid1-=-[-[1,-20,-14,-31,-9,-22],-[20,-14,-31,-9,-22,-1],-[14,-31,-9,-22,-1,-20],-];-const-grid2-=-[-[18,-29,-7,-28,-12,-35],-[29,-7,-28,-12,-35,-18],-[7,-28,-12,-35,-18,-29],-];-const-grid3-=-[-[3,-26,-32,-15,-19,-4],-[26,-32,-15,-19,-4,-3],-[32,-15,-19,-4,-3,-26],-];-const-grid4-=-[-[21,-2,-25,-17,-34,-6],-[2,-25,-17,-34,-6,-21],-[25,-17,-34,-6,-21,-2],-];-const-grid5-=-[-[27,-13,-36,-11,-30,-8],-[13,-36,-11,-30,-8,-27],-[36,-11,-30,-8,-27,-13],-];-const-grid6-=-[-[23,-10,-5,-24,-16,-33],-[10,-5,-24,-16,-33,-23],-[5,-24,-16,-33,-23,-10],-];-const-[clickedNumbers,-setClickedNumbers]-=-useState<{-[key:-number]:-number-}>({});-const-[checkedColumns,-setCheckedColumns]-=-useState<{-[key:-string]:-boolean[]-}>({-grid1:-[false,-false,-false,-false,-false,-false],-grid2:-[false,-false,-false,-false,-false,-false],-grid3:-[false,-false,-false,-false,-false,-false],-grid4:-[false,-false,-false,-false,-false,-false],-grid5:-[false,-false,-false,-false,-false,-false],-grid6:-[false,-false,-false,-false,-false,-false],-});-const-[lastClickedNumbers,-setLastClickedNumbers]-=-useState<number[]>([]);-useEffect(()-=>-{-//-Function-to-check-if-a-column-in-a-grid-has-no-clicked-numbers-const-checkEmptyColumns-=-()-=>-{-const-newCheckedColumns-=-{-...checkedColumns-};-//-Check-each-grid-Object.keys(newCheckedColumns).forEach((gridName)-=>-{-const-grid-=-newCheckedColumns[gridName];-for-(let-i-=-0;-i-<-grid.length;-i++)-{-const-colIndex-=-i;-const-columnNumbers-=-grid1.map((row)-=>-row[colIndex]);-//-Adjust-this-for-other-grids-accordingly-const-hasClickedNumbers-=-columnNumbers.some((number)-=>-clickedNumbers[number]);-if-(!hasClickedNumbers)-{-newCheckedColumns[gridName][colIndex]-=-true;-}-}-});-setCheckedColumns(newCheckedColumns);-};-//-Call-the-function-to-check-empty-columns-on-each-render-checkEmptyColumns();-},-[clickedNumbers,-checkedColumns]);-const-handleNumberClick-=-(number:-number)-=>-{-const-count-=-clickedNumbers[number]-||-0;-setClickedNumbers({-...clickedNumbers,-[number]:-count-+-1-});-setLastClickedNumbers((prev)-=>-[...prev,-number].slice(-10));-};-const-handleCheckboxChange-=-(gridName:-string,-columnIndex:-number)-=>-{-const-newCheckedColumns-=-{-...checkedColumns-};-newCheckedColumns[gridName][columnIndex]-=-!newCheckedColumns[gridName][columnIndex];-setCheckedColumns(newCheckedColumns);-};-const-handleUndo-=-()-=>-{-if-(lastClickedNumbers.length->-0)-{-const-lastNumber-=-lastClickedNumbers[lastClickedNumbers.length---1];-const-count-=-clickedNumbers[lastNumber]-||-0;-setClickedNumbers({-...clickedNumbers,-[lastNumber]:-count---1-});-setLastClickedNumbers(lastClickedNumbers.slice(0,--1));-}-};-const-handleReset-=-()-=>-{-setClickedNumbers({});-setLastClickedNumbers([]);-setCheckedColumns({-grid1:-[false,-false,-false,-false,-false,-false],-grid2:-[false,-false,-false,-false,-false,-false],-grid3:-[false,-false,-false,-false,-false,-false],-grid4:-[false,-false,-false,-false,-false,-false],-grid5:-[false,-false,-false,-false,-false,-false],-grid6:-[false,-false,-false,-false,-false,-false],-});-};-const-totalClicked-=-Object.values(clickedNumbers).reduce((sum,-count)-=>-sum-+-count,-0);-return-(-<div-className="container-mx-auto-p-4">-<h2-className="text-2xl-font-bold-mb-4">Race-Track</h2>-<div-className="mb-4">-<h3-className="text-lg-font-bold">Totale-numeri-sortiti:</h3>-<p-className="text-xl">{totalClicked}</p>-</div>-<div-className="mb-4">-<h3-className="text-lg-font-bold">Ultimi-10-numeri-cliccati:</h3>-<div-className="flex-gap-2">-{lastClickedNumbers.map((number,-index)-=>-(-<div-key={index}-className="text-white-w-8-h-8-rounded-bg-blue-500-flex-justify-center-items-center"->-{number}-</div>-))}-</div>-</div>-<div-className="flex-flex-col-gap-2">-<div-className="flex-gap-2">-{numbers.slice(0,-18).map((number,-index)-=>-(-<button-key={index}-className={`text-white-w-8-h-8-rounded-none-${index-%-2-!==-0-?-'bg-black'-:-'bg-red-500'}-${clickedNumbers[number]-?-'bg-green-500'-:-''}`}-onClick={()-=>-handleNumberClick(number)}->-<div-className="flex-justify-center-items-center-h-full">{number}</div>-</button>-))}-</div>-<div-className="flex-gap-2">-{numbers.slice(18).map((number,-index)-=>-(-<button-key={index}-className={`text-white-w-8-h-8-rounded-none-${index-%-2-===-0-?-'bg-black'-:-'bg-red-500'}-${clickedNumbers[number]-?-'bg-green-500'-:-''}`}-onClick={()-=>-handleNumberClick(number)}->-<div-className="flex-justify-center-items-center-h-full">{number}</div>-</button>-))}-</div>-</div>-<div-className="flex-flex-wrap-gap-4-mt-4">-{[{-grid:-grid1,-title:-'Grid-1',-name:-'grid1'-},-{-grid:-grid2,-title:-'Grid-2',-name:-'grid2'-},-{-grid:-grid3,-title:-'Grid-3',-name:-'grid3'-},-{-grid:-grid4,-title:-'Grid-4',-name:-'grid4'-},-{-grid:-grid5,-title:-'Grid-5',-name:-'grid5'-},-{-grid:-grid6,-title:-'Grid-6',-name:-'grid6'-}].map((item,-index)-=>-(-<div-key={index}-className="border-2-border-gray-500-p-2-rounded">-<h3-className="text-lg-font-bold-mb-2">{item.title}</h3>-<div-className="flex-flex-col-gap-2">-{item.grid.map((row,-rowIndex)-=>-(-<div-key={rowIndex}-className="flex-gap-2">-{row.map((number,-numberIndex)-=>-(-<div-key={numberIndex}-className="flex-flex-col-items-center">-<button-className={`w-8-h-8-rounded-full-bg-gray-300-${clickedNumbers[number]-?-'bg-green-500'-:-''}`}-onClick={()-=>-handleNumberClick(number)}->-{number}-</button>-<label-className="mt-1-text-sm">-<input-type="checkbox"-checked={checkedColumns[item.name][numberIndex]}-onChange={()-=>-handleCheckboxChange(item.name,-numberIndex)}-/>-</label>-</div>-))}-</div>-))}-</div>-</div>-))}-</div>-<div-className="mt-4">-<button-onClick={handleUndo}-className="bg-blue-500-text-white-px-4-py-2-rounded-mr-2"->-Undo-</button>-<button-onClick={handleReset}-className="bg-red-500-text-white-px-4-py-2-rounded"->-Reset-</button>-</div>-</div>-);-};-export-default-RaceTrack;