Skip to content

Commit 59057db

Browse files
amrlabibamrlabib
committed
more changes in demo
1 parent 81663a5 commit 59057db

File tree

9 files changed

+95
-132
lines changed

9 files changed

+95
-132
lines changed

‎demo/App.js

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,30 @@ const GlobalStyle = createGlobalStyle`
1616
}
1717
`;
1818

19-
const StyledContainer = styled.div`
19+
const Container = styled.div`
2020
width: 1170px;
2121
margin-left: auto;
2222
margin-right: auto;
2323
`;
2424

25-
const StyledApp = styled.div`
26-
flex: 1;
27-
`;
28-
2925
const HeaderBG = styled.div`
3026
background-color: #404549;
3127
`;
3228

33-
const StyledHeader = styled.div`
29+
const Header = styled.div`
3430
display: flex;
3531
justify-content: space-between;
3632
align-items: center;
37-
3833
& h1 {
3934
margin: 20px 0;
4035
}
4136
`;
4237

43-
const StyledH1 = styled.h1`
38+
const H1 = styled.h1`
4439
color: white;
4540
`;
4641

47-
const StyledSeparator = styled.div`
42+
const Separator = styled.div`
4843
height: 0px;
4944
margin-top: 30px;
5045
border: dashed 2px #404549;
@@ -53,32 +48,30 @@ const StyledSeparator = styled.div`
5348
export default function App() {
5449
const time = new Date();
5550
time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
56-
// time.setMilliseconds(time.getMilliseconds() + 100); // 6.5 seconds timer
5751
return (
58-
<StyledApp>
52+
<div>
5953
<GlobalStyle />
6054
<HeaderBG>
61-
<StyledContainer>
62-
<StyledHeader>
63-
<StyledH1>react-timer-hook</StyledH1>
55+
<Container>
56+
<Header>
57+
<H1>react-timer-hook</H1>
6458
<div>
6559
<iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160" height="30" title="GitHub" />
6660
<iframe src="https://ghbtns.com/github-btn.html?user=amrlabib&repo=react-timer-hook&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="126" height="30" title="GitHub" />
6761
</div>
68-
</StyledHeader>
69-
</StyledContainer>
62+
</Header>
63+
</Container>
7064
</HeaderBG>
71-
<StyledContainer>
65+
<Container>
7266
<p>
73-
React timer hook is a custom <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank">react hook</a>,
74-
built to handle timer, stopwatch, and time logic/state in your react component.
67+
React timer hook is a custom <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank">react hook</a> built to handle timer, stopwatch, and time logic/state in your react component.
7568
</p>
7669
<UseTimerDemo expiryTimestamp={time} />
77-
<StyledSeparator />
70+
<Separator />
7871
<UseStopwatchDemo />
79-
<StyledSeparator />
72+
<Separator />
8073
<UseTimeDemo />
81-
</StyledContainer>
82-
</StyledApp>
74+
</Container>
75+
</div>
8376
);
8477
}

‎demo/components/Button.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import styled from 'styled-components';
33

4-
const StyledButton = styled.button`
4+
const ButtonStyled = styled.button`
55
border-radius: 5;
66
margin: 0 10px 0 0px;
77
outline: none;
88
border: none;
9-
padding: 7px 15px;
9+
padding: 6px 14px;
1010
color: #404549;
1111
border-radius: 3px;
1212
border: solid 1px #404549;
@@ -18,6 +18,6 @@ const StyledButton = styled.button`
1818

1919
export default function Button(props) {
2020
return (
21-
<StyledButton {...props} />
21+
<ButtonStyled {...props} />
2222
);
2323
}

‎demo/components/Digit.js

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
import React from 'react';
22
import styled from 'styled-components';
33

4-
const StyledContainer = styled.div`
4+
const Container = styled.div`
55
display: flex;
66
flex-direction: column;
77
align-items: center;
8-
margin: 0 7px;
8+
margin: 0 5px;
99
&: first-child {
1010
margin-left: 0;
1111
}
1212
`;
1313

14-
const StyledTitle = styled.span`
14+
const Title = styled.span`
1515
font-size: 12px;
1616
margin-bottom: 5px;
1717
`;
1818

19-
const StyledDigitContainer = styled.div`
19+
const DigitContainer = styled.div`
2020
display: flex;
2121
flex-direction: row;
2222
padding: 0;
2323
`;
2424

25-
const StyledSingleDigit = styled.span`
25+
const SingleDigit = styled.span`
2626
position: relative;
2727
display: flex;
2828
flex: 0 1 25%;
2929
font-size: 30px;
3030
background-color: #404549;
3131
border-radius: 5px;
32-
padding: 10px 15px;
32+
padding: 10px 12px;
3333
color: white;
3434
&:first-child {
35-
margin-right: 10px;
35+
margin-right: 2px;
3636
}
3737
&:after {
3838
position: absolute;
@@ -52,16 +52,16 @@ export default function Digit({ value, title }: Object) {
5252
const leftDigit = value >= 10 ? value.toString()[0] : '0';
5353
const rightDigit = value >= 10 ? value.toString()[1] : value.toString();
5454
return (
55-
<StyledContainer>
56-
<StyledTitle>{title}</StyledTitle>
57-
<StyledDigitContainer>
58-
<StyledSingleDigit>
55+
<Container>
56+
<Title>{title}</Title>
57+
<DigitContainer>
58+
<SingleDigit>
5959
{leftDigit}
60-
</StyledSingleDigit>
61-
<StyledSingleDigit>
60+
</SingleDigit>
61+
<SingleDigit>
6262
{rightDigit}
63-
</StyledSingleDigit>
64-
</StyledDigitContainer>
65-
</StyledContainer>
63+
</SingleDigit>
64+
</DigitContainer>
65+
</Container>
6666
);
6767
}

‎demo/components/StyledTimer.js

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎demo/components/TimerStyled.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Digit from './Digit';
4+
5+
const TimerContainer = styled.div`
6+
display: flex;
7+
flex-direction: row;
8+
align-items: center;
9+
margin-bottom: 30px;
10+
`;
11+
12+
const SepartorContainer = styled.span`
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
align-self: flex-end;
17+
margin: 0 0 10px 0px;
18+
`;
19+
20+
const Separtor = styled.span`
21+
display: inline-block;
22+
width: 6px;
23+
height: 6px;
24+
background-color: #404549;
25+
border-radius: 6px;
26+
margin: 5px 0px;
27+
`;
28+
29+
export default function TimerStyled({ seconds, minutes, hours, days }: Object) {
30+
return (
31+
<TimerContainer>
32+
{days !== undefined ? <Digit value={days} title="DAYS" addSeparator /> : null}
33+
{days !== undefined ? (<SepartorContainer><Separtor /><Separtor /></SepartorContainer>): null}
34+
<Digit value={hours} title="HOURS" addSeparator />
35+
<SepartorContainer><Separtor /><Separtor /></SepartorContainer>
36+
<Digit value={minutes} title="MINUTES" addSeparator />
37+
<SepartorContainer><Separtor /><Separtor /></SepartorContainer>
38+
<Digit value={seconds} title="SECONDS" />
39+
</TimerContainer>
40+
);
41+
}

‎demo/components/UseStopwatchDemo.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react';
22
import { useStopwatch } from '../../src/index';
33
import Button from './Button';
4-
import StyledTimer from './StyledTimer';
4+
import TimerStyled from './TimerStyled';
55

66
export default function UseStopwatchDemo() {
77
const {
88
seconds,
99
minutes,
1010
hours,
1111
days,
12-
isRunning,
1312
start,
1413
pause,
1514
reset,
@@ -19,7 +18,7 @@ export default function UseStopwatchDemo() {
1918
return (
2019
<div>
2120
<h2>UseStopwatch Demo</h2>
22-
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
21+
<TimerStyled seconds={seconds} minutes={minutes} hours={hours} days={days} />
2322
<Button onClick={start}>Start</Button>
2423
<Button onClick={pause}>Pause</Button>
2524
<Button onClick={reset}>Reset</Button>

‎demo/components/UseTimeDemo.js

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,20 @@
11
import React from 'react';
2-
import styled from 'styled-components';
32
import { useTime } from '../../src/index';
4-
import StyledTimer from './StyledTimer';
5-
6-
const StyledRow = styled.div`
7-
flex: 1;
8-
display: flex;
9-
// justify-content: center;
10-
align-items: center;
11-
`;
12-
13-
const StyledText = styled.span`
14-
font-size: 60px;
15-
color: white;
16-
margin-left: 20px;
17-
margin-top: 12px;
18-
`;
3+
import TimerStyled from './TimerStyled';
194

205
export default function UseTimeDemo() {
216
const {
227
seconds,
238
minutes,
249
hours,
25-
ampm,
2610
} = useTime({ });
2711

2812
return (
2913
<div>
3014
<h2>UseTime Demo</h2>
31-
<StyledRow>
32-
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} />
33-
<StyledText>{ampm}</StyledText>
34-
</StyledRow>
15+
<div>
16+
<TimerStyled seconds={seconds} minutes={minutes} hours={hours} />
17+
</div>
3518
</div>
3619
);
3720
}

‎demo/components/UseTimerDemo.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React from 'react';
22
import { useTimer } from '../../src/index';
3-
import StyledTimer from './StyledTimer';
3+
import TimerStyled from './TimerStyled';
44
import Button from './Button';
55

6-
export default function UseTimerDemo({ expiryTimestamp }) {
6+
export default function UseTimerDemo({ expiryTimestamp }: Object) {
77
const {
88
seconds,
99
minutes,
1010
hours,
1111
days,
12-
isRunning,
1312
start,
1413
pause,
1514
resume,
@@ -20,14 +19,14 @@ export default function UseTimerDemo({ expiryTimestamp }) {
2019
return (
2120
<div>
2221
<h2>UseTimer Demo</h2>
23-
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
22+
<TimerStyled seconds={seconds} minutes={minutes} hours={hours} days={days} />
2423
<Button type="button" onClick={start}>Start</Button>
2524
<Button type="button" onClick={pause}>Pause</Button>
2625
<Button type="button" onClick={resume}>Resume</Button>
2726
<Button
2827
type="button"
2928
onClick={() => {
30-
// Restarts to 5 minutes timer
29+
// Restarts to 10 minutes timer
3130
const time = new Date();
3231
time.setSeconds(time.getSeconds() + 600);
3332
restart(time);

0 commit comments

Comments
 (0)