9 changed files with 129 additions and 63 deletions
@ -0,0 +1,41 @@ |
|||||
|
import React, { Component } from 'react' |
||||
|
import { Card, Icon, Button, Modal } from 'semantic-ui-react' |
||||
|
import { QRCode } from 'react-qr-svg'; |
||||
|
import Clipboard from 'react-clipboard.js'; |
||||
|
|
||||
|
export default class CardComponent extends Component { |
||||
|
render() { |
||||
|
return (<Card key={this.key}> |
||||
|
<Card.Content> |
||||
|
<Card.Header> |
||||
|
{this.props.header} |
||||
|
</Card.Header> |
||||
|
<Card.Meta> |
||||
|
{this.props.metaHeader} |
||||
|
</Card.Meta> |
||||
|
<Card.Description> |
||||
|
{this.props.description} |
||||
|
</Card.Description> |
||||
|
</Card.Content> |
||||
|
<Card.Content extra> |
||||
|
{!this.props.showInfoURL ? <div className='ui two buttons'> |
||||
|
<Modal closeIcon trigger={<Button icon='qrcode' content='Show QR-Code' />}> |
||||
|
<Modal.Header className="ui center aligned">{this.props.description}</Modal.Header> |
||||
|
<Modal.Content style={{ textAlign: "center" }}> |
||||
|
<QRCode style={{ width: "75%" }} value={this.props.description} /> |
||||
|
</Modal.Content> |
||||
|
</Modal> |
||||
|
<Clipboard component="button" className="ui button" data-clipboard-text={this.props.description} button-title="Copy the Shortened URL to the Clipboard"> |
||||
|
<div> |
||||
|
<Icon name="clipboard" /> |
||||
|
Copy to Clipboard |
||||
|
</div> |
||||
|
</Clipboard> |
||||
|
</div> : <div className='ui two buttons'> |
||||
|
<Button icon='line chart' content='Show live tracking' /> |
||||
|
<Button icon='clock' content='Show recent visitors' /> |
||||
|
</div>} |
||||
|
</Card.Content> |
||||
|
</Card>) |
||||
|
} |
||||
|
}; |
||||
Loading…
Reference in new issue