@activecollab/components
Version:
ActiveCollab Components
37 lines • 1.72 kB
JavaScript
import React, { useState } from "react";
import classNames from "classnames";
import { StyledStopwatch, StyledStopwatchCenterWrapper, StyledTrigger } from "./Stopwatch.style";
import { EditableHours } from "../EditableHours";
import { IconButton } from "../IconButton";
import { CloseIcon, NoteIcon, PauseSmallIcon, PlaySmallIcon, UploadIcon } from "../Icons";
export const Stopwatch = () => {
const [isActive, setIsActive] = useState(false);
return /*#__PURE__*/React.createElement(StyledStopwatch, {
className: classNames("", {
"tw-bg-red-100": isActive,
"tw-bg-gray-100": !isActive
})
}, /*#__PURE__*/React.createElement(IconButton, {
onClick: () => setIsActive(!isActive),
className: classNames("tw-shadow-none hover:tw-shadow-none", {
"tw-bg-red-400 hover:bg-red-500": isActive,
"tw-bg-indigo-400 hover:bg-indigo-400": !isActive
})
}, !isActive ? /*#__PURE__*/React.createElement(PlaySmallIcon, null) : /*#__PURE__*/React.createElement(PauseSmallIcon, null)), /*#__PURE__*/React.createElement(StyledStopwatchCenterWrapper, null, /*#__PURE__*/React.createElement(EditableHours, {
value: "00:00"
}), /*#__PURE__*/React.createElement(IconButton, {
size: "small",
variant: "tertiary"
}, /*#__PURE__*/React.createElement(NoteIcon, {
width: 20
})), true && /*#__PURE__*/React.createElement(IconButton, {
size: "small",
variant: "tertiary"
}, /*#__PURE__*/React.createElement(CloseIcon, {
width: 20
}))), /*#__PURE__*/React.createElement(StyledTrigger, {
onClick: () => setIsActive(!isActive)
}, /*#__PURE__*/React.createElement(UploadIcon, null)));
};
Stopwatch.displayName = "Stopwatch";
//# sourceMappingURL=Stopwatch.js.map