248 lines
6.9 KiB
TypeScript
248 lines
6.9 KiB
TypeScript
|
/* eslint-disable react/prop-types */
|
||
|
import * as React from 'react';
|
||
|
import Button, { IconButton } from '../../components/button';
|
||
|
import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';
|
||
|
|
||
|
const style = require('../style.css');
|
||
|
|
||
|
const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
|
||
|
|
||
|
const Spacer: React.SFC<any> = () => <div style={{ display: 'flex', flex: '1 1 auto' }} />;
|
||
|
const CardList: React.SFC<any> = ({ children }) => <ul className={style.cardsGroup}>{children}</ul>;
|
||
|
const CardListItem: React.SFC<any> = ({ component, name }) => (
|
||
|
<li className={style.cardItem}>
|
||
|
<div className={style.cardItemContent}>{component}</div>
|
||
|
<div className={style.cardItemName}>{name}</div>
|
||
|
</li>
|
||
|
);
|
||
|
|
||
|
const cards: any = {
|
||
|
basic: [{
|
||
|
name: 'Basic Card',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardTitle
|
||
|
title="Title goes here"
|
||
|
subtitle="Subtitle here"
|
||
|
/>
|
||
|
<CardText>{dummyText}</CardText>
|
||
|
<CardActions>
|
||
|
<Button label="Action 1" />
|
||
|
<Button label="Action 2" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: 'Raised Card',
|
||
|
component: (
|
||
|
<Card raised className={style.card}>
|
||
|
<CardTitle
|
||
|
title="Title goes here"
|
||
|
subtitle="Subtitle here"
|
||
|
/>
|
||
|
<CardText>{dummyText}</CardText>
|
||
|
<CardActions>
|
||
|
<Button label="Action 1" />
|
||
|
<Button label="Action 2" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: 'Customized header',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardTitle
|
||
|
title={<u>Title component</u>}
|
||
|
subtitle={<u>Subtitle component</u>}
|
||
|
/>
|
||
|
<CardText>{dummyText}</CardText>
|
||
|
<CardActions>
|
||
|
<Button label="Action 1" />
|
||
|
<Button label="Action 2" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}],
|
||
|
media: [{
|
||
|
name: '16:9 Card Media Area',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardMedia
|
||
|
aspectRatio="wide"
|
||
|
className={style.primary}
|
||
|
>
|
||
|
<CardTitle>Basic Card</CardTitle>
|
||
|
</CardMedia>
|
||
|
<CardTitle subtitle="You can also use a subtitle like this" />
|
||
|
<CardText>{dummyText}</CardText>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: '16:9 Card Media Image',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardMedia
|
||
|
aspectRatio="wide"
|
||
|
image="https://placeimg.com/800/450/nature"
|
||
|
/>
|
||
|
<CardTitle
|
||
|
title="Title goes here"
|
||
|
subtitle="Subtitle here"
|
||
|
/>
|
||
|
<CardText>{dummyText}</CardText>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: 'Square Media Card',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardMedia
|
||
|
contentOverlay
|
||
|
aspectRatio="square"
|
||
|
image="https://placeimg.com/700/700/nature"
|
||
|
>
|
||
|
<CardTitle
|
||
|
title="Title goes here"
|
||
|
subtitle="Subtitle here"
|
||
|
/>
|
||
|
<CardActions>
|
||
|
<Button inverse label="Action 1" />
|
||
|
<Button inverse label="Action 2" />
|
||
|
</CardActions>
|
||
|
</CardMedia>
|
||
|
</Card>
|
||
|
),
|
||
|
}],
|
||
|
avatar: [{
|
||
|
name: 'Avatar Card Title',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardTitle
|
||
|
avatar="https://placeimg.com/80/80/animals"
|
||
|
title="Avatar Card"
|
||
|
subtitle="An awesome basic card"
|
||
|
/>
|
||
|
<CardMedia
|
||
|
aspectRatio="wide"
|
||
|
image="https://placeimg.com/800/450/nature"
|
||
|
/>
|
||
|
<CardActions style={{ justifyContent: 'flex-end' }}>
|
||
|
<IconButton icon="share" />
|
||
|
<IconButton icon="favorite" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: 'Video in a card',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<CardTitle
|
||
|
avatar="https://placeimg.com/80/80/animals"
|
||
|
title="Avatar Card"
|
||
|
subtitle="An awesome basic card"
|
||
|
/>
|
||
|
<CardMedia
|
||
|
aspectRatio="wide"
|
||
|
>
|
||
|
<iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&showinfo=0" frameBorder="0" allowFullScreen />
|
||
|
</CardMedia>
|
||
|
<CardActions style={{ justifyContent: 'flex-end' }}>
|
||
|
<IconButton icon="report_problem" />
|
||
|
<Spacer />
|
||
|
<IconButton icon="share" />
|
||
|
<IconButton icon="favorite" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}],
|
||
|
horizontal: [{
|
||
|
name: 'Alternative Layout Example',
|
||
|
component: (
|
||
|
<Card className={style.card}>
|
||
|
<div className={style.cardRow}>
|
||
|
<CardTitle
|
||
|
title="Title goes here"
|
||
|
subtitle="Subtitle here"
|
||
|
/>
|
||
|
<CardMedia
|
||
|
className={style.media}
|
||
|
image="https://placeimg.com/400/400/nature"
|
||
|
/>
|
||
|
</div>
|
||
|
<CardActions>
|
||
|
<Button label="Action 1" />
|
||
|
<Button label="Action 2" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: 'Another Variation',
|
||
|
component: (
|
||
|
<Card>
|
||
|
<div className={style.cardRow}>
|
||
|
<CardTitle
|
||
|
title="Title goes here"
|
||
|
subtitle="Subtitle here"
|
||
|
/>
|
||
|
<CardMedia
|
||
|
className={style.mediaLarge}
|
||
|
image="https://placeimg.com/400/400/nature"
|
||
|
/>
|
||
|
</div>
|
||
|
</Card>
|
||
|
),
|
||
|
}],
|
||
|
small: [{
|
||
|
name: 'Small Media Card',
|
||
|
component: (
|
||
|
<Card>
|
||
|
<CardMedia
|
||
|
aspectRatio="square"
|
||
|
image="https://placeimg.com/400/400/nature"
|
||
|
>
|
||
|
<CardTitle>Test</CardTitle>
|
||
|
</CardMedia>
|
||
|
<CardActions style={{ justifyContent: 'center' }}>
|
||
|
<IconButton icon="thumb_down" />
|
||
|
<IconButton icon="thumb_up" />
|
||
|
<IconButton icon="turned_in_not" />
|
||
|
</CardActions>
|
||
|
</Card>
|
||
|
),
|
||
|
}, {
|
||
|
name: 'Small Media Controls',
|
||
|
component: (
|
||
|
<Card style={{ width: '140px' }}>
|
||
|
<CardMedia
|
||
|
contentOverlay
|
||
|
aspectRatio="square"
|
||
|
image="https://placeimg.com/280/280/people"
|
||
|
>
|
||
|
<CardActions style={{ justifyContent: 'center' }}>
|
||
|
<IconButton inverse icon="fast_rewind" />
|
||
|
<IconButton inverse icon="play_arrow" />
|
||
|
<IconButton inverse icon="fast_forward" />
|
||
|
</CardActions>
|
||
|
</CardMedia>
|
||
|
</Card>
|
||
|
),
|
||
|
}],
|
||
|
};
|
||
|
|
||
|
const CardTest = () => (
|
||
|
<section>
|
||
|
<h5>Cards</h5>
|
||
|
<p>You have multiple options for cards. Combine different subcomponents to create your own:</p>
|
||
|
|
||
|
<div className={style.cards}>
|
||
|
{Object.keys(cards).map(key => (
|
||
|
<CardList key={key}>
|
||
|
{cards[key].map((demo: any, i: any) => <CardListItem key={key + i} {...demo} />)}
|
||
|
</CardList>
|
||
|
))}
|
||
|
</div>
|
||
|
</section>
|
||
|
);
|
||
|
|
||
|
export default CardTest;
|