react-material-time-picker/src/view/index.js

TimePicker is a user interface component that allows the user to easily select a specific time. It provides an analog clock interface that is easy to use and intuitive. TimePicker can be easily integrated into other user interface components, making it a

import { useState } from "react";
import TimePicker from "../components/timepicker/Timepicker.js";

export default function App() {
    const [show, setShow] = useState(false);
    const [theme, setTheme] = useState("light");
    const defaultTime = "2355";
    const [time, setTime] = useState(defaultTime);

    return (
        <>
            <p>
                Selected Time: {time.slice(0, 2)}:{time.slice(2)}
            </p>
            <button onClick={() => setShow(true)}>Pick a time</button>
            <p>Theme is: {theme}</p>
            <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
                Change to {theme === "dark" ? "light" : "dark"}
            </button>
            <TimePicker
                theme={theme}
                clockWidth={300}
                onChange={(value) => setTime(value)}
                show={show}
                defaultValue={defaultTime}
                hide={() => setShow(false)}
                zIndex={1002}
                style={{ top: "5px", width: "350px" }}
                buttons={[
                    {
                        label: "Cancel",
                        onClick: () => setShow(false)
                    },
                    {
                        label: "Save",
                        onClick: () => {
                            setShow(false);
                        }
                    }
                ]}
            />
        </>
    );
}