Spaces:
Configuration error
Configuration error
File size: 2,042 Bytes
74aacd5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import React, { useState } from 'react'
import { Coffee } from 'react-feather'
import Button from '../shared/Button'
import Modal from '../shared/Modal'
import CoffeeMachineGif from '../../media/coffee-machine-lineal.gif'
const CoffeeIcon = () => {
const [show, setShow] = useState(false)
const onClick = () => {
setShow(true)
}
return (
<div>
<Button
onClick={onClick}
toolTip="Buy me a coffee"
style={{ border: 0 }}
icon={<Coffee />}
/>
<Modal
onClose={() => setShow(false)}
title="Buy Me a Coffee"
className="modal-setting"
show={show}
showCloseIcon={false}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<h4 style={{ lineHeight: '24px' }}>
Hi, if you found my project is useful, please conside buy me a
coffee to support my work. Thanks!
</h4>
<img
src={CoffeeMachineGif}
alt="coffee machine"
style={{
height: 150,
objectFit: 'contain',
}}
/>
</div>
<div
style={{
display: 'flex',
width: '100%',
justifyContent: 'flex-end',
alignItems: 'center',
gap: '12px',
}}
>
<Button onClick={() => setShow(false)}> No thanks </Button>
<a
href="https://ko-fi.com/Z8Z1CZJGY"
target="_blank"
rel="noreferrer"
>
<Button border onClick={() => setShow(false)}>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '8px',
}}
>
Sure
</div>
</Button>
</a>
</div>
</Modal>
</div>
)
}
export default CoffeeIcon
|