1
- import React , { useState , useEffect } from "react" ;
1
+
2
2
import "./App.css" ;
3
3
4
4
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
+
23
6
24
7
return (
25
8
< 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 >
27
9
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 >
59
10
</ div >
60
11
) ;
61
12
}
62
13
63
- export default App ;
14
+ export default App ;
0 commit comments