Skip to content

Commit 7c44fde

Browse files
chore(remove): remove timer
1 parent dc687ae commit 7c44fde

File tree

2 files changed

+3
-61
lines changed

2 files changed

+3
-61
lines changed

src/App.css

-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,2 @@
11
@import "tailwindcss";
2-
.App {
3-
color: black;
4-
text-align: center;
5-
}
62

7-
.container {
8-
width: 400px;
9-
padding: 1rem;
10-
background-color: white;
11-
}

src/App.tsx

+3-52
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,14 @@
1-
import React, { useState, useEffect } from "react";
1+
22
import "./App.css";
33

44
function App() {
5-
const [time, setTime] = useState(0);
6-
const [isRunning, setIsRunning] = useState(false);
7-
8-
useEffect(() => {
9-
let interval: NodeJS.Timeout;
10-
if (isRunning) {
11-
interval = setInterval(() => {
12-
setTime(prevTime => prevTime + 1);
13-
}, 1000);
14-
}
15-
return () => clearInterval(interval);
16-
}, [isRunning]);
17-
18-
const formatTime = (seconds: number) => {
19-
const mins = Math.floor(seconds / 60);
20-
const secs = seconds % 60;
21-
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
22-
};
5+
236

247
return (
258
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
26-
<h1 className="text-4xl font-bold text-gray-800 mb-8">Timer Extension</h1>
279

28-
<div className="bg-white rounded-lg shadow-lg p-8 mb-8">
29-
<div className="text-6xl font-mono mb-8">{formatTime(time)}</div>
30-
31-
<div className="flex gap-4">
32-
<button
33-
onClick={() => setIsRunning(!isRunning)}
34-
className="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
35-
>
36-
{isRunning ? 'Pause' : 'Start'}
37-
</button>
38-
39-
<button
40-
onClick={() => {
41-
setTime(0);
42-
setIsRunning(false);
43-
}}
44-
className="px-6 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
45-
>
46-
Reset
47-
</button>
48-
</div>
49-
</div>
50-
51-
<p className="text-gray-600 text-center max-w-md">
52-
A simple extension to help you track time.
53-
</p>
54-
55-
<p className="text-gray-600 text-center max-w-md mt-4">
56-
Click start to begin timing,
57-
pause to stop temporarily, and reset to start over.
58-
</p>
5910
</div>
6011
);
6112
}
6213

63-
export default App;
14+
export default App;

0 commit comments

Comments
 (0)