- {hour >= 10 ? hour : "0" + hour} :{" "}
- {minute >= 10 ? minute : "0" + minute}{" "}
- :{" "}
- {second >= 10 ? second : "0" + second}{" "}
- :{" "}
-
- {ms >= 100 ? ms : ms >= 10 ? "0" + ms : "00" + ms}
-
+ {hour.toString().padStart(2, "0")} :{" "}
+ {minute.toString().padStart(2, "0")} :{" "}
+ {second.toString().padStart(2, "0")} :{" "}
+ {ms.toString().padStart(3, "0")}
-
+ {status === "play" ? (
+
+ ) : (
+
+ )}
-
-- lap --
{lap.map((elem, index) => (
- {elem.hour >= 10 ? elem.hour : "0" + elem.hour} :{" "}
- {elem.minute >= 10 ? elem.minute : "0" + elem.minute} :{" "}
- {elem.second >= 10 ? elem.second : "0" + elem.second} :{" "}
- {elem.ms >= 100
- ? elem.ms
- : elem.ms >= 10
- ? "0" + elem.ms
- : "00" + elem.ms}
+ {elem.hour.toString().padStart(2, "0")} :{" "}
+ {elem.minute.toString().padStart(2, "0")} :{" "}
+ {elem.second.toString().padStart(2, "0")} :{" "}
+ {elem.ms.toString().padStart(3, "0")}
))}
@@ -83,7 +77,11 @@ const watchContainer = css`
}
`;
-const playContainer = (props) => css`
+interface playProps {
+ status: string;
+}
+
+const playContainer = (props: playProps) => css`
height: 100px;
display: flex;
justify-content: center;
diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx
index 55b9f29..e0530ad 100644
--- a/src/components/Timer.tsx
+++ b/src/components/Timer.tsx
@@ -1,12 +1,11 @@
-/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
-import { ReactComponent as Plus } from "../images/plus.svg";
-import { ReactComponent as Minus } from "../images/minus.svg";
-import { ReactComponent as Play } from "../images/play.svg";
-import { ReactComponent as Pause } from "../images/pause.svg";
-import { ReactComponent as Stop } from "../images/stop.svg";
-import { ReactComponent as Lap } from "../images/lap.svg";
-import useTimer from "../hooks/useTimer";
+import { ReactComponent as Plus } from "@images/plus.svg";
+import { ReactComponent as Minus } from "@images/minus.svg";
+import { ReactComponent as Play } from "@images/play.svg";
+import { ReactComponent as Pause } from "@images/pause.svg";
+import { ReactComponent as Stop } from "@images/stop.svg";
+import { ReactComponent as Lap } from "@images/lap.svg";
+import useTimer from "@hooks/useTimer";
const Timer = () => {
const {
@@ -38,19 +37,19 @@ const Timer = () => {
/>
= 10 ? hour : "0" + hour}
+ value={hour.toString().padStart(2, "0")}
onChange={hourChange}
>
:
= 10 ? minute : "0" + minute}
+ value={minute.toString().padStart(2, "0")}
onChange={minuteChange}
>
:
= 10 ? second : "0" + second}
+ value={second.toString().padStart(2, "0")}
onChange={secondChange}
>
{
/>
-- lap --
{lap.map((elem, index) => (
- {elem.hour >= 10 ? elem.hour : "0" + elem.hour} :{" "}
- {elem.minute >= 10 ? elem.minute : "0" + elem.minute} :{" "}
- {elem.second >= 10 ? elem.second : "0" + elem.second}
+ {elem.hour.toString().padStart(2, "0")} :{" "}
+ {elem.minute.toString().padStart(2, "0")} :{" "}
+ {elem.second.toString().padStart(2, "0")}
))}
@@ -80,7 +82,14 @@ const Timer = () => {
);
};
-const totalContainer = (props) => css`
+interface totalProps {
+ status: string;
+ hour: number;
+ minute: number;
+ second: number;
+}
+
+const totalContainer = (props: totalProps) => css`
padding: 1.5rem;
background-color: ${props.status === "play" &&
props.hour === 0 &&
@@ -100,7 +109,14 @@ const totalContainer = (props) => css`
: "white"};
`;
-const watchContainer = (props) => css`
+interface MutableRefObject