const TimePicker = ({ onTimePick, format }) => {

  if(format == 24){
    return (
      <div>
        <ul className={`${circle}`}>
          <li className={`${deg0}`} onClick={(e) => onTimePick(e, '3')}>3</li>
          <li className={`${deg30}`} onClick={(e) => onTimePick(e, '4')}>4</li>
          <li className={`${deg60}`} onClick={(e) => onTimePick(e, '5')}>5</li>
          <li className={`${deg90}`} onClick={(e) => onTimePick(e, '6')}>6</li>
          <li className={`${deg120}`} onClick={(e) => onTimePick(e, '7')}>7</li>
          <li className={`${deg150}`} onClick={(e) => onTimePick(e, '8')}>8</li>
          <li className={`${deg180}`} onClick={(e) => onTimePick(e, '9')}>9</li>
          <li className={`${deg210}`} onClick={(e) => onTimePick(e, '10')}>10</li>
          <li className={`${deg240}`} onClick={(e) => onTimePick(e, '11')}>11</li>
          <li className={`${deg270}`} onClick={(e) => onTimePick(e, '12')}>12</li>
          <li className={`${deg300}`} onClick={(e) => onTimePick(e, '1')}>1</li>
          <li className={`${deg330}`} onClick={(e) => onTimePick(e, '2')}>2</li>
          <li className={`${ideg0}`} onClick={(e) => onTimePick(e, '15')}>15</li>
          <li className={`${ideg30}`} onClick={(e) => onTimePick(e, '16')}>16</li>
          <li className={`${ideg60}`} onClick={(e) => onTimePick(e, '17')}>17</li>
          <li className={`${ideg90}`} onClick={(e) => onTimePick(e, '18')}>18</li>
          <li className={`${ideg120}`} onClick={(e) => onTimePick(e, '19')}>19</li>
          <li className={`${ideg150}`} onClick={(e) => onTimePick(e, '20')}>20</li>
          <li className={`${ideg180}`} onClick={(e) => onTimePick(e, '21')}>21</li>
          <li className={`${ideg210}`} onClick={(e) => onTimePick(e, '22')}>22</li>
          <li className={`${ideg240}`} onClick={(e) => onTimePick(e, '23')}>23</li>
          <li className={`${ideg270}`} onClick={(e) => onTimePick(e, '00')}>00</li>
          <li className={`${ideg300}`} onClick={(e) => onTimePick(e, '13')}>13</li>
          <li className={`${ideg330}`} onClick={(e) => onTimePick(e, '14')}>14</li>
          <li className={`${iideg0}`} onClick={(e) => onTimePick(e, '33')}>33</li>
        </ul>
      </div>
    )
  }
  if(format == 12){}
}