franjsco
/
tick3t
mirror of https://github.com/franjsco/tick3t
1
0
Fork 0
Code Issues Releases Wiki Activity

improvement: add link in the Card component

This commit is contained in:
frab1t 2019-07-06 11:37:48 +02:00
parent 3dc0ce67bd
commit 87344de371
3 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Card.js
View File

@ -6,6 +6,8 @@ import {
CardBody CardBody
} from 'reactstrap'; } from 'reactstrap';
import { Link } from 'react-router-dom';
const style = { const style = {
borderRadius: 10 borderRadius: 10
}; };
@ -23,31 +25,40 @@ class Card extends Component {
if (this.props.bodyAlign) { if (this.props.bodyAlign) {
bodyAlign = `text-${this.props.bodyAlign}`; bodyAlign = `text-${this.props.bodyAlign}`;
} }
if (this.props.headAlign) { if (this.props.headAlign) {
headAlign = `text-${this.props.headAlign}`; headAlign = `text-${this.props.headAlign}`;
} }
return ( return (
<CardBootstrap <CardBootstrap
className={`${bodyAlign} shadow-sm p-3 mb-5 bg-white`} className={`${bodyAlign} shadow-sm p-3 mb-5 bg-white`}
style={style} style={style}
> >
<CardBody> <CardBody>
<CardTitle> <CardTitle>
<h5 className={headAlign}> <h5 className={headAlign}>
{this.props.title} {this.props.title}
</h5> </h5>
</CardTitle> </CardTitle>
<CardText> <CardText>
{this.props.subtitle} {this.props.subtitle}
</CardText> </CardText>
<div> <div>
{this.props.children} {this.props.children}
</div> </div>
</CardBody> {
</CardBootstrap> this.props.footerLink && (
<div className={`text-${this.props.footerLink.align || 'center'}`}>
<Link to={this.props.footerLink.path}>
{this.props.footerLink.name}
</Link>
</div>)
}
</CardBody>
</CardBootstrap>
); );
} }
} }

14
src/containers/CreateTicket/CreateTicket.js
View File

@ -110,7 +110,10 @@ class CreateTicket extends Component {
render() { render() {
if (this.state.ticketId) { if (this.state.ticketId) {
return ( return (
<Card title="Ticket Created"> <Card
title="Ticket Created"
footerLink={{path:"/", name:"Back to home"}}
>
<p> <p>
{`Ticket ID: ${this.state.ticketId}`} {`Ticket ID: ${this.state.ticketId}`}
</p> </p>
@ -118,7 +121,10 @@ class CreateTicket extends Component {
); );
} else if (this.state.error) { } else if (this.state.error) {
return ( return (
<Card title="Error"> <Card
title="Error"
footerLink={{path:"/", name:"Back to home"}}
>
<p>{this.state.error}</p> <p>{this.state.error}</p>
</Card> </Card>
); );
@ -127,6 +133,7 @@ class CreateTicket extends Component {
return ( return (
<Card <Card
title="Create Ticket" title="Create Ticket"
footerLink={{path:"/", name:"Back to home"}}
> >
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<Row form> <Row form>
@ -252,9 +259,6 @@ class CreateTicket extends Component {
<FormGroup> <FormGroup>
<Button>Open Ticket</Button> <Button>Open Ticket</Button>
</FormGroup> </FormGroup>
<Link to="/">
Back to home
</Link>
</Col> </Col>
</Row> </Row>
</Form> </Form>

3
src/containers/PageNotFound.js
View File

@ -1,5 +1,4 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Card from '../components/Card'; import Card from '../components/Card';
class PageNotFound extends Component { class PageNotFound extends Component {
@ -14,9 +13,9 @@ class PageNotFound extends Component {
<div> <div>
<Card <Card
title="404 - Page not found" title="404 - Page not found"
footerLink={{path:"/", name:"Back to home"}}
> >
<p>The page is not found</p> <p>The page is not found</p>
<Link to="/">Back to home</Link>
</Card> </Card>
</div> </div>
); );