2016-04-10 12:45:32 +03:00
/* eslint-disable react/prop-types */
2015-10-11 20:07:09 +03:00
import React from 'react' ;
2015-11-25 00:46:09 +03:00
import Button , { IconButton } from '../../components/button' ;
import Card , { CardActions , CardMedia , CardText , CardTitle } from '../../components/card' ;
2015-11-18 00:24:22 +03:00
import style from '../style' ;
2015-09-21 11:01:52 +03:00
2015-11-18 00:24:22 +03:00
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.' ;
2015-09-21 11:01:52 +03:00
2015-11-25 00:46:09 +03:00
const Spacer = ( ) => < div style = { { display : 'flex' , flex : '1 1 auto' } } / > ;
2015-11-28 15:28:37 +03:00
const CardList = ( { children } ) => < ul className = { style . cardsGroup } > { children } < / u l > ;
const CardListItem = ( { component , name } ) => (
< li className = { style . cardItem } >
< div className = { style . cardItemContent } > { component } < / d i v >
< div className = { style . cardItemName } > { name } < / d i v >
2015-11-22 09:01:49 +03:00
< / l i >
) ;
2015-11-25 00:46:09 +03:00
const cards = {
basic : [ {
2015-11-18 00:24:22 +03:00
name : 'Basic Card' ,
component : (
< Card className = { style . card } >
2015-11-22 09:01:49 +03:00
< CardTitle
title = "Title goes here"
subtitle = "Subtitle here"
/ >
2015-11-18 00:24:22 +03:00
< CardText > { dummyText } < / C a r d T e x t >
< CardActions >
2015-11-22 09:01:49 +03:00
< Button label = "Action 1" / >
< Button label = "Action 2" / >
2015-11-18 00:24:22 +03:00
< / C a r d A c t i o n s >
< / C a r d >
)
2015-11-22 04:43:18 +03:00
} , {
2015-11-22 09:01:49 +03:00
name : 'Raised Card' ,
component : (
< Card raised className = { style . card } >
< CardTitle
title = "Title goes here"
subtitle = "Subtitle here"
/ >
< CardText > { dummyText } < / C a r d T e x t >
2016-01-22 15:31:55 +03:00
< CardActions >
< Button label = "Action 1" / >
< Button label = "Action 2" / >
< / C a r d A c t i o n s >
< / C a r d >
)
} , {
name : 'Customized header' ,
component : (
< Card className = { style . card } >
< CardTitle
title = { < u > Title component < / u > }
subtitle = { < u > Subtitle component < / u > }
/ >
< CardText > { dummyText } < / C a r d T e x t >
2015-11-22 09:01:49 +03:00
< CardActions >
< Button label = "Action 1" / >
< Button label = "Action 2" / >
< / C a r d A c t i o n s >
< / C a r d >
)
2015-11-25 00:46:09 +03:00
} ] ,
media : [ {
2015-11-22 09:01:49 +03:00
name : '16:9 Card Media Area' ,
2015-11-22 04:43:18 +03:00
component : (
< Card className = { style . card } >
< CardMedia
aspectRatio = "wide"
className = { style . primary }
>
< CardTitle > Basic Card < / C a r d T i t l e >
< / C a r d M e d i a >
< CardTitle subtitle = "You can also use a subtitle like this" / >
< CardText > { dummyText } < / C a r d T e x t >
< / C a r d >
)
2015-11-18 00:24:22 +03:00
} , {
2015-11-22 09:01:49 +03:00
name : '16:9 Card Media Image' ,
2015-11-18 00:24:22 +03:00
component : (
< Card className = { style . card } >
< CardMedia
aspectRatio = "wide"
image = "https://placeimg.com/800/450/nature"
/ >
2015-11-22 09:01:49 +03:00
< CardTitle
title = "Title goes here"
subtitle = "Subtitle here"
/ >
2015-11-18 00:24:22 +03:00
< CardText > { dummyText } < / C a r d T e x t >
< / C a r d >
)
} , {
2015-11-22 09:01:49 +03:00
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" / >
< / C a r d A c t i o n s >
< / C a r d M e d i a >
< / C a r d >
)
2015-11-25 00:46:09 +03:00
} ] ,
avatar : [ {
2015-11-18 00:24:22 +03:00
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' } } >
2015-11-25 00:46:09 +03:00
< IconButton icon = "share" / >
< IconButton icon = "favorite" / >
2015-11-18 00:24:22 +03:00
< / C a r d A c t i o n s >
< / C a r d >
)
2015-11-22 04:43:18 +03:00
} , {
2015-11-22 09:01:49 +03:00
name : 'Video in a card' ,
2015-11-22 04:43:18 +03:00
component : (
< Card className = { style . card } >
2015-11-22 09:01:49 +03:00
< CardTitle
avatar = "https://placeimg.com/80/80/animals"
title = "Avatar Card"
subtitle = "An awesome basic card"
/ >
< CardMedia
aspectRatio = "wide"
>
2016-08-07 22:23:14 +03:00
< iframe width = "1280" height = "720" src = "https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&showinfo=0" frameBorder = "0" allowFullScreen / >
2015-11-22 09:01:49 +03:00
< / C a r d M e d i a >
< CardActions style = { { justifyContent : 'flex-end' } } >
2015-11-25 00:46:09 +03:00
< IconButton icon = "report_problem" / >
2015-11-22 09:01:49 +03:00
< Spacer / >
2015-11-25 00:46:09 +03:00
< IconButton icon = "share" / >
< IconButton icon = "favorite" / >
2015-11-22 09:01:49 +03:00
< / C a r d A c t i o n s >
< / C a r d >
)
2015-11-25 00:46:09 +03:00
} ] ,
horizontal : [ {
2015-11-22 09:23:58 +03:00
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"
/ >
< / d i v >
< CardActions >
< Button label = "Action 1" / >
< Button label = "Action 2" / >
< / C a r d A c t i o n s >
< / C a r d >
)
} , {
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"
/ >
< / d i v >
< / C a r d >
)
2015-11-25 00:46:09 +03:00
} ] ,
small : [ {
2015-11-22 09:01:49 +03:00
name : 'Small Media Card' ,
component : (
< Card >
2015-11-22 04:43:18 +03:00
< CardMedia
aspectRatio = "square"
2015-11-22 09:01:49 +03:00
image = "https://placeimg.com/400/400/nature"
2015-11-22 04:43:18 +03:00
>
2015-11-22 09:01:49 +03:00
< CardTitle > Test < / C a r d T i t l e >
< / C a r d M e d i a >
< CardActions style = { { justifyContent : 'center' } } >
2015-11-25 00:46:09 +03:00
< IconButton icon = "thumb_down" / >
< IconButton icon = "thumb_up" / >
< IconButton icon = "turned_in_not" / >
2015-11-22 09:01:49 +03:00
< / C a r d A c t i o n s >
< / C a r d >
)
} , {
2015-11-22 09:23:58 +03:00
name : 'Small Media Controls' ,
2015-11-22 09:01:49 +03:00
component : (
2015-11-22 09:23:58 +03:00
< Card style = { { width : '140px' } } >
< CardMedia
contentOverlay
aspectRatio = "square"
image = "https://placeimg.com/280/280/people"
>
< CardActions style = { { justifyContent : 'center' } } >
2015-11-25 00:46:09 +03:00
< IconButton inverse icon = "fast_rewind" / >
< IconButton inverse icon = "play_arrow" / >
< IconButton inverse icon = "fast_forward" / >
2015-11-22 09:23:58 +03:00
< / C a r d A c t i o n s >
< / C a r d M e d i a >
2015-11-22 04:43:18 +03:00
< / C a r d >
)
2015-11-25 00:46:09 +03:00
} ]
} ;
2015-11-22 09:23:58 +03:00
2015-11-25 00:46:09 +03:00
const CardTest = ( ) => (
2015-11-28 15:28:37 +03:00
< section >
< h5 > Cards < / h 5 >
< 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 } / > ) }
< / C a r d L i s t >
) ) }
< / d i v >
< / s e c t i o n >
2015-11-25 00:46:09 +03:00
) ;
2015-10-22 02:31:17 +03:00
export default CardTest ;