370 lines
13 KiB
Python
370 lines
13 KiB
Python
import React, { Fragment } from 'react';
|
||
import { Button, Card, CardBody, Col, Row } from 'reactstrap';
|
||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||
import PageHeader from '../common/PageHeader';
|
||
import FalconCardHeader from '../common/FalconCardHeader';
|
||
import FalconEditor from '../common/FalconEditor';
|
||
import classNames from 'classnames';
|
||
import Notification from '../notification/Notification';
|
||
|
||
import generic1 from '../../assets/img/generic/1.jpg';
|
||
import generic3 from '../../assets/img/generic/3.jpg';
|
||
import generic6 from '../../assets/img/generic/6.jpg';
|
||
import generic7 from '../../assets/img/generic/7.jpg';
|
||
import generic8 from '../../assets/img/generic/8.jpg';
|
||
import generic10 from '../../assets/img/generic/10.jpg';
|
||
import generic11 from '../../assets/img/generic/11.jpg';
|
||
import generic12 from '../../assets/img/generic/12.jpg';
|
||
import team1 from '../../assets/img/team/1.jpg';
|
||
|
||
const cardStyleCode = `<CardColumns>
|
||
{
|
||
['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map((color, index) => (
|
||
<Card body inverse color={color} className={classNames({'bg-dark' : color === 'light'}) } key={index}>
|
||
<CardTitle>{color} card title</CardTitle>
|
||
<CardText>
|
||
Some quick example text to build on the card
|
||
title and make up the bulk of the card's content.
|
||
</CardText>
|
||
</Card>
|
||
))
|
||
}
|
||
</CardColumns>`;
|
||
|
||
const basicExampleCode = `<Card style={{width: '20rem'}}>
|
||
<CardImg src={generic1} top />
|
||
<CardBody>
|
||
<CardTitle tag="h5">
|
||
Card title
|
||
</CardTitle>
|
||
<CardText tag="p">
|
||
Some quick example text to build on the card
|
||
title and make up the bulk of the card's
|
||
content.
|
||
</CardText>
|
||
<Button color="primary" size="sm">
|
||
Go somewhere
|
||
</Button>
|
||
</CardBody>
|
||
</Card>`;
|
||
|
||
const cardWithListCode = `<ListGroup>
|
||
<ListGroupItem>
|
||
Cras justo odio
|
||
</ListGroupItem>
|
||
<ListGroupItem>
|
||
Dapibus ac facilisis in
|
||
</ListGroupItem>
|
||
<ListGroupItem>
|
||
Morbi leo risus
|
||
</ListGroupItem>
|
||
<ListGroupItem>
|
||
Porta ac consectetur ac
|
||
</ListGroupItem>
|
||
<ListGroupItem>
|
||
Vestibulum at eros
|
||
</ListGroupItem>
|
||
<ListGroupItem>
|
||
Odio at morbi
|
||
</ListGroupItem>
|
||
</ListGroup>`;
|
||
|
||
const cardWithImageCode = `<Card style={{width: '20rem'}}>
|
||
<CardImg src={generic3} top />
|
||
<CardBody>
|
||
<CardTitle tag="h5">Card title</CardTitle>
|
||
<CardText tag="p">
|
||
Some quick example text to build on the card title and make up the bulk of the card's content.
|
||
</CardText>
|
||
</CardBody>
|
||
<ListGroup flush>
|
||
<ListGroupItem>Cras justo odio</ListGroupItem>
|
||
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
|
||
<ListGroupItem>Vestibulum at eros</ListGroupItem>
|
||
<ListGroupItem>
|
||
<a className="card-link" href="#!">
|
||
Card link
|
||
</a>
|
||
<a className="card-link" href="#!">
|
||
Another link
|
||
</a>
|
||
</ListGroupItem>
|
||
</ListGroup>
|
||
</Card>`;
|
||
|
||
const cardGroupsCode = `<CardGroup>
|
||
<Card>
|
||
<CardImg top width="100%" src={generic10} alt="Card image cap" />
|
||
<CardBody>
|
||
<CardTitle tag="h5">First card title</CardTitle>
|
||
<CardText>
|
||
This is a wider card with supporting text below as a natural lead-in to additional content. This
|
||
content is a little bit longer.
|
||
</CardText>
|
||
<p className="text-muted">
|
||
<small className="text-muted"> Last updated 45 mins ago</small>
|
||
</p>
|
||
</CardBody>
|
||
</Card>
|
||
<Card>
|
||
<CardImg top width="100%" src={generic11} alt="Card image cap" />
|
||
<CardBody>
|
||
<CardTitle tag="h5">Second card title</CardTitle>
|
||
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
|
||
<p className="text-muted">
|
||
<small className="text-muted">Last updated an hour ago</small>
|
||
</p>
|
||
</CardBody>
|
||
</Card>
|
||
<Card>
|
||
<CardImg top width="100%" src={generic12} alt="Card image cap" />
|
||
<CardBody>
|
||
<CardTitle tag="h5">Yet another card title</CardTitle>
|
||
<CardText>
|
||
This is a wider card with supporting text below as a natural lead-in to additional content. This card
|
||
has even longer content than the first to show that equal height action.
|
||
</CardText>
|
||
<p className="text-muted">
|
||
<small className="text-muted"> Last updated yesterday</small>
|
||
</p>
|
||
</CardBody>
|
||
</Card>
|
||
</CardGroup>`;
|
||
|
||
const cardDeckCode = `<CardDeck>
|
||
<Card>
|
||
<CardImg top width="100%" src={generic6} alt="Card image cap" />
|
||
<CardBody>
|
||
<CardTitle tag="h5">Awesome card title</CardTitle>
|
||
<CardText>
|
||
This is a wider card with supporting text below as a natural lead-in to additional content. This
|
||
content is a little bit longer.
|
||
</CardText>
|
||
<p className="text-muted">
|
||
<small className="text-muted"> Last updated 45 mins ago</small>
|
||
</p>
|
||
</CardBody>
|
||
</Card>
|
||
<Card>
|
||
<CardImg top width="100%" src={generic7} alt="Card image cap" />
|
||
<CardBody>
|
||
<CardTitle tag="h5">Beautiful card title</CardTitle>
|
||
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
|
||
<p className="text-muted">
|
||
<small className="text-muted">Last updated an hour ago</small>
|
||
</p>
|
||
</CardBody>
|
||
</Card>
|
||
<Card>
|
||
<CardImg top width="100%" src={generic8} alt="Card image cap" className="rounded-0" />
|
||
<CardBody>
|
||
<CardTitle tag="h5">Gorgeous card title</CardTitle>
|
||
<CardText>
|
||
This is a wider card with supporting text below as a natural lead-in to additional content. This card
|
||
has even longer content than the first to show that equal height action.
|
||
</CardText>
|
||
<p className="text-muted">
|
||
<small className="text-muted"> Last updated yesterday</small>
|
||
</p>
|
||
</CardBody>
|
||
</Card>
|
||
</CardDeck>`;
|
||
|
||
const backgroundCode = `<Card className="bg-dark text-white" inverse style={{maxWidth: '30rem'}}>
|
||
<CardImg src={generic3} alt="Card image cap" />
|
||
<CardImgOverlay className="d-flex align-items-end">
|
||
<div>
|
||
<CardTitle tag="h5" className="text-white">
|
||
Card Title
|
||
</CardTitle>
|
||
<CardText>
|
||
Some quick example text to build on the card title and make up the bulk of the card's content.
|
||
</CardText>
|
||
</div>
|
||
</CardImgOverlay>
|
||
</Card>`;
|
||
|
||
const propertiesCard = `Card.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
inverse: PropTypes.bool,
|
||
color: PropTypes.string,
|
||
body: PropTypes.bool,
|
||
className: PropTypes.string
|
||
}
|
||
`;
|
||
const propertiesCardBody = `CardBody.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardColumns = `CardColumns.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardDeck = `CardDeck.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
|
||
const propertiesCardFooter = `CardFooter.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardGroup = `CardGroup.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardHeader = `CardHeader.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};
|
||
`;
|
||
const propertiesCardImg = `CardImg.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string,
|
||
// Use top or bottom to position image via "card-img-top" or "card-img-bottom"
|
||
top: PropTypes.bool,
|
||
bottom: PropTypes.bool
|
||
};`;
|
||
const propertiesCardImgOverlay = `CardImgOverlay.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardLink = `CardLink.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string,
|
||
// ref will only get you a reference to the CardLink component, use innerRef to get a reference to the DOM element (for things like focus management).
|
||
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
|
||
};`;
|
||
const propertiesCardSubtitle = `CardSubtitle.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardText = `CardText.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
const propertiesCardTitle = `CardTitle.propTypes = {
|
||
// Pass in a Component to override default element
|
||
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
||
className: PropTypes.string
|
||
};`;
|
||
|
||
const Cards = () => (
|
||
<Fragment>
|
||
<PageHeader
|
||
title="Cards"
|
||
description="Falcon’s cards provide a flexible and extensible content container with multiple variants and options."
|
||
className="mb-3"
|
||
>
|
||
<Button
|
||
tag="a"
|
||
href="https://reactstrap.github.io/components/card"
|
||
target="_blank"
|
||
color="link"
|
||
size="sm"
|
||
className="pl-0"
|
||
>
|
||
Cards on reactstrap
|
||
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
||
</Button>
|
||
</PageHeader>
|
||
<Row noGutters>
|
||
<Col xl={6} className="pr-xl-2">
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Basic Example" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={basicExampleCode} scope={{ generic1 }} language="jsx" />
|
||
</CardBody>
|
||
</Card>
|
||
</Col>
|
||
<Col xl={6} className="pl-xl-2">
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Card with list" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={cardWithListCode} />
|
||
</CardBody>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Properties" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={propertiesCard} hidePreview />
|
||
<FalconEditor code={propertiesCardBody} hidePreview />
|
||
<FalconEditor code={propertiesCardColumns} hidePreview />
|
||
<FalconEditor code={propertiesCardDeck} hidePreview />
|
||
<FalconEditor code={propertiesCardFooter} hidePreview />
|
||
<FalconEditor code={propertiesCardGroup} hidePreview />
|
||
<FalconEditor code={propertiesCardHeader} hidePreview />
|
||
<FalconEditor code={propertiesCardImg} hidePreview />
|
||
<FalconEditor code={propertiesCardImgOverlay} hidePreview />
|
||
<FalconEditor code={propertiesCardLink} hidePreview />
|
||
<FalconEditor code={propertiesCardSubtitle} hidePreview />
|
||
<FalconEditor code={propertiesCardText} hidePreview />
|
||
<FalconEditor code={propertiesCardTitle} hidePreview />
|
||
</CardBody>
|
||
</Card>
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Card with image" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={cardWithImageCode} scope={{ generic3 }} language="jsx" />
|
||
</CardBody>
|
||
</Card>
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Notification" light={false} />
|
||
<CardBody className="bg-light">
|
||
<Notification
|
||
avatar={{
|
||
src: team1,
|
||
size: 'xl'
|
||
}}
|
||
time="Just Now"
|
||
emoji="📢"
|
||
to="#!"
|
||
>
|
||
Announcing the winners of the The only book awards decided by you, the readers. Check out the champions and
|
||
runners-up in all 21 categories now!
|
||
</Notification>
|
||
</CardBody>
|
||
</Card>
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Background" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={backgroundCode} scope={{ generic3 }} language="jsx" />
|
||
</CardBody>
|
||
</Card>
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Cards Groups" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={cardGroupsCode} scope={{ generic10, generic11, generic12 }} />
|
||
</CardBody>
|
||
</Card>
|
||
<Card className="mb-3">
|
||
<FalconCardHeader title="Cards Deck" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={cardDeckCode} scope={{ generic6, generic7, generic8 }} />
|
||
</CardBody>
|
||
</Card>
|
||
<Card>
|
||
<FalconCardHeader title="Card styles" light={false} />
|
||
<CardBody className="bg-light">
|
||
<FalconEditor code={cardStyleCode} scope={{ classNames }} language="jsx" />
|
||
</CardBody>
|
||
</Card>
|
||
</Fragment>
|
||
);
|
||
|
||
export default Cards;
|