You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.1 KiB
47 lines
1.1 KiB
import React from 'react'; |
|
import '../../../components/style/fontsize.scss'; |
|
|
|
function ButtonIncrement(props) { |
|
return ( |
|
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}> |
|
+ |
|
</p> |
|
) |
|
} |
|
|
|
function ButtonDecrement(props) { |
|
|
|
return ( |
|
<p type='button' outline onClick={props.onClickFunc} style={{padding: '0px 5px'}}> |
|
- |
|
</p> |
|
) |
|
} |
|
|
|
function Display(props) { |
|
return ( |
|
<label >{props.message}</label> |
|
) |
|
} |
|
|
|
const Fontsize = (props) => { |
|
|
|
const {countersize, setCounter} = props; |
|
const incrementCounter = () => setCounter(countersize + 1); |
|
let decrementCounter = () => setCounter(countersize - 1); |
|
|
|
if(countersize <= 1) { |
|
decrementCounter = () => setCounter(1); |
|
} |
|
return ( |
|
<div className='nav-fontBtn'> |
|
<nav> |
|
<ButtonIncrement onClickFunc={incrementCounter}/> |
|
<Display message={countersize}/> |
|
<ButtonDecrement onClickFunc={decrementCounter}/> |
|
</nav> |
|
</div> |
|
) |
|
} |
|
|
|
export default Fontsize
|
|
|