42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
|
import Moon from '../svgs/moon-fill.svg'
|
||
|
|
import Check from '../svgs/check-double-line.svg'
|
||
|
|
import Fail from '../svgs/close-line.svg'
|
||
|
|
|
||
|
|
function InvoiceDefaultStatus ({ status }) {
|
||
|
|
return (
|
||
|
|
<div className='d-flex mt-2'>
|
||
|
|
<Moon className='spin fill-grey' />
|
||
|
|
<div className='ml-3 text-muted' style={{ fontWeight: '600' }}>{status}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function InvoiceConfirmedStatus ({ status }) {
|
||
|
|
return (
|
||
|
|
<div className='d-flex mt-2'>
|
||
|
|
<Check className='fill-success' />
|
||
|
|
<div className='ml-3 text-success' style={{ fontWeight: '600' }}>{status}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function InvoiceFailedStatus ({ status }) {
|
||
|
|
return (
|
||
|
|
<div className='d-flex mt-2'>
|
||
|
|
<Fail className='fill-danger' />
|
||
|
|
<div className='ml-3 text-danger' style={{ fontWeight: '600' }}>{status}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function InvoiceStatus ({ variant, status }) {
|
||
|
|
switch (variant) {
|
||
|
|
case 'confirmed':
|
||
|
|
return <InvoiceConfirmedStatus status={status} />
|
||
|
|
case 'failed':
|
||
|
|
return <InvoiceFailedStatus status={status} />
|
||
|
|
default:
|
||
|
|
return <InvoiceDefaultStatus status={status} />
|
||
|
|
}
|
||
|
|
}
|