Есть ли готовое решение для времени работы организации ReactJS?

Question

[Young_nigilist]

Мне надо сделать добавление ресторана с указанием информации о нем, включая время работы. Я сделал очень простой:

<Table bordered size="sm">
          <tbody>
            <tr
              className={
                workedMonday ? "text-center" : "text-center my-bg_secondary"
              }
            >
              <th>
                <Form.Group controlId="">
                  <Form.Check
                    type="checkbox"
                    defaultChecked={workedMonday}
                    onClick={() => setWorkedMonday(!workedMonday)}
                  />
                </Form.Group>
              </th>
              <th>Monday</th>
              <th>
                <input
                  type="time"
                  value={mondayStart}
                  onChange={(e) => {
                    setMondayStart(e.target.value);
                    setBusinessWork((businessWork) => [
                      ...businessWork,
                      { mondayStart: e.target.value },
                    ]);
                  }}
                  disabled={!workedMonday}
                />
              </th>
              <th>
                <input
                  type="time"
                  value={mondayEnd}
                  onChange={(e) => {
                    setMondayEnd(e.target.value);
                    setBusinessWork((businessWork) => [
                      ...businessWork,
                      { mondayEnd: e.target.value },
                    ]);
                  }}
                  disabled={!workedMonday}
                />
              </th>
            </tr>
            ...
          </tbody>
        </Table>

Но выглядит не очень хорошо, как и логика. Не смог найти готовый компонент, может есть какой? Либо как можно переделать такой?

Comments

[Yustas Alexu]

Ищите по фразе "React working hours" или "React opening hours", найдется что-нибудь, например:
https://codesandbox.io/s/xkxr6jz8p?file=/src/compo...
https://github.com/bibekg/react-schedule-selector
https://hours.js.org/storybook/?path=/story/react-...