231 lines
6.4 KiB
JavaScript
231 lines
6.4 KiB
JavaScript
import React from 'react';
|
|
import Button, { IconButton } from '../../components/button';
|
|
import Card, { CardActions, CardMedia, CardText, CardTitle } from '../../components/card';
|
|
import style from '../style';
|
|
|
|
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 = () => <div style={{display: 'flex', flex: '1 1 auto'}}/>;
|
|
const CardList = ({children}) => <ul className={style.cardsGroup}>{children}</ul>;
|
|
const CardListItem = ({component, name}) => (
|
|
<li className={style.cardItem}>
|
|
<div className={style.cardItemContent}>{component}</div>
|
|
<div className={style.cardItemName}>{name}</div>
|
|
</li>
|
|
);
|
|
|
|
const cards = {
|
|
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>
|
|
)
|
|
}],
|
|
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></iframe>
|
|
</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, i) => <CardListItem key={key + i} {...demo} />)}
|
|
</CardList>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
export default CardTest;
|