Skip to content

Commit 1fd3c7d

Browse files
amrlabibamrlabib
committed
demo styling
1 parent 0cf6f8f commit 1fd3c7d

File tree

10 files changed

+461
-20
lines changed

10 files changed

+461
-20
lines changed

‎demo/App.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23
import UseTimerDemo from './components/UseTimerDemo';
34
import UseStopwatchDemo from './components/UseStopwatchDemo';
45
import UseTimeDemo from './components/UseTimeDemo';
56

7+
const StylesApp = styled.div`
8+
flex: 1;
9+
width: 100%;
10+
height: 100%;
11+
background-color: #232323;
12+
`;
613

714
export default function App() {
815
const time = new Date();
916
// time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
1017
time.setMilliseconds(time.getMilliseconds() + 100); // 6.5 seconds timer
1118
return (
12-
<div>
19+
<StylesApp>
1320
<UseTimerDemo expiryTimestamp={time} />
1421
<UseStopwatchDemo />
1522
<UseTimeDemo />
16-
</div>
23+
</StylesApp>
1724
);
1825
}

‎demo/components/Button.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
const StyledButton = styled.button`
5+
background-color: #73D1FE;
6+
border-radius: 5;
7+
margin: 0 5px 0 5px;
8+
outline: none;
9+
border: none;
10+
padding: 5px 10px;
11+
color: white;
12+
`;
13+
14+
export default function Button(props) {
15+
return (
16+
<StyledButton {...props} />
17+
);
18+
}

‎demo/components/Digit.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
const StyledContainer = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
`;
9+
10+
const StyledTitle = styled.span`
11+
font-size: 14px;
12+
color: white;
13+
margin-bottom: 5px;
14+
`;
15+
16+
const StyledDigitContainer = styled.div`
17+
display: flex;
18+
flex-direction: row;
19+
`;
20+
21+
const StyledSingleDigit = styled.span`
22+
display: flex;
23+
flex: 0 1 25%;
24+
font-size: 70px;
25+
background-color: #404549;
26+
border-radius: 5px;
27+
padding: 5px 20px;
28+
color: white;
29+
margin: 0 5px;
30+
`;
31+
32+
export default function Digit({ value, title, addSeparator }: Object) {
33+
const leftDigit = value >= 10 ? value.toString()[0] : '0';
34+
const rightDigit = value >= 10 ? value.toString()[1] : value.toString();
35+
return (
36+
<StyledContainer>
37+
<StyledTitle>{title}</StyledTitle>
38+
<StyledDigitContainer>
39+
<StyledSingleDigit>
40+
{leftDigit}
41+
</StyledSingleDigit>
42+
<StyledSingleDigit>
43+
{rightDigit}
44+
</StyledSingleDigit>
45+
</StyledDigitContainer>
46+
</StyledContainer>
47+
);
48+
}

‎demo/components/StyledTimer.js

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

‎demo/components/UseStopwatchDemo.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React from 'react';
22
import { useStopwatch } from '../../src/index';
3+
import Button from './Button';
4+
import Digit from './Digit';
5+
import StyledTimer from './StyledTimer';
36

47
export default function UseStopwatchDemo() {
58
const {
@@ -17,13 +20,11 @@ export default function UseStopwatchDemo() {
1720
return (
1821
<div style={{textAlign: 'center'}}>
1922
<p>Stopwatch Demo</p>
20-
<div style={{fontSize: '100px'}}>
21-
<span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
22-
</div>
23+
<StyledTimer seconds={seconds} minutes={minutes} hours={hours} days={days} />
2324
<p>{isRunning ? 'Running' : 'Not running'}</p>
24-
<button onClick={start}>Start</button>
25-
<button onClick={pause}>Pause</button>
26-
<button onClick={reset}>Reset</button>
25+
<Button onClick={start}>Start</Button>
26+
<Button onClick={pause}>Pause</Button>
27+
<Button onClick={reset}>Reset</Button>
2728
</div>
2829
);
2930
}

‎demo/components/UseTimeDemo.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { useTime } from '../../src/index';
3+
import StyledTimer from './StyledTimer';
34

45
export default function UseTimeDemo() {
56
const {
@@ -13,7 +14,8 @@ export default function UseTimeDemo() {
1314
<div style={{textAlign: 'center'}}>
1415
<p>Current Time Demo</p>
1516
<div style={{fontSize: '100px'}}>
16-
<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span><span>{ampm}</span>
17+
<StyledTimer seconds={seconds} minutes={minutes} hours={hours}/>
18+
<span>{ampm}</span>
1719
</div>
1820
</div>
1921
);

‎demo/components/UseTimerDemo.js

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

46
export default function UseTimerDemo({ expiryTimestamp }) {
57
const {
@@ -19,14 +21,12 @@ export default function UseTimerDemo({ expiryTimestamp }) {
1921
<div style={{ textAlign: 'center' }}>
2022
<h1>react-timer-hook </h1>
2123
<p>Timer Demo</p>
22-
<div style={{ fontSize: '100px' }}>
23-
<span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
24-
</div>
24+
<StyledTimer seconds={seconds} minutes={minutes} hours={hours}/>
2525
<p>{isRunning ? 'Running' : 'Not running'}</p>
26-
<button type="button" onClick={start}>Start</button>
27-
<button type="button" onClick={pause}>Pause</button>
28-
<button type="button" onClick={resume}>Resume</button>
29-
<button
26+
<Button type="button" onClick={start}>Start</Button>
27+
<Button type="button" onClick={pause}>Pause</Button>
28+
<Button type="button" onClick={resume}>Resume</Button>
29+
<Button
3030
type="button"
3131
onClick={() => {
3232
// Restarts to 5 minutes timer
@@ -36,7 +36,7 @@ export default function UseTimerDemo({ expiryTimestamp }) {
3636
}}
3737
>
3838
Restart
39-
</button>
39+
</Button>
4040
</div>
4141
);
4242
}

‎docs/index.js

Lines changed: 119 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"husky": "^4.0.1",
5858
"react": "^16.8.0",
5959
"react-dom": "16.8.0",
60+
"styled-components": "^5.2.1",
6061
"webpack": "^4.24.0",
6162
"webpack-cli": "^3.1.2",
6263
"webpack-dev-server": "^3.1.10"

0 commit comments

Comments
 (0)