kitten-components
Version:
Front-end components library
153 lines (145 loc) • 6.37 kB
JavaScript
import React from 'react'
import Radium, { StyleRoot } from 'radium'
import { RewardCard } from 'kitten/components/cards/reward-card'
import { Container } from 'kitten/components/grid/container'
import { Marger } from 'kitten/components/layout/marger'
import { KarlExampleTitle } from 'kitten/karl/examples/title'
export const KarlRewardCard = () => (
<StyleRoot>
<KarlExampleTitle>Reward card</KarlExampleTitle>
<Container>
<Marger bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsumn, consectetuer adipiscing elit."
description="In enim justo."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
]}
buttonLabel="Choose"
/>
</Marger>
</Container>
<KarlExampleTitle>Disabled Reward card</KarlExampleTitle>
<Container>
<Marger top="2" bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
{ label: 'Availability:', value: '200' },
]}
buttonLabel="Choose"
manageContributionDescription="You contributed to this project"
manageContributionLinkLabel="Manage my contribution"
isDisabled
/>
</Marger>
</Container>
<KarlExampleTitle>Completed Reward card</KarlExampleTitle>
<Container>
<Marger top="2" bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
{ label: 'Availability:', value: '200' },
]}
manageContributionDescription="You contributed to this project"
manageContributionLinkLabel="Manage my contribution"
imageProps={{
src: 'http://via.placeholder.com/200x350/caf4fe/caf4fe',
alt: '',
}}
/>
</Marger>
</Container>
<KarlExampleTitle>Without Image Reward card</KarlExampleTitle>
<Container>
<Marger top="2" bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
{ label: 'Availability:', value: '200' },
]}
manageContributionDescription="You contributed to this project"
manageContributionLinkLabel="Manage my contribution"
/>
</Marger>
</Container>
<KarlExampleTitle>Without Image Reward card</KarlExampleTitle>
<Container>
<Marger top="2" bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
{ label: 'Availability:', value: '200' },
]}
manageContributionDescription="You contributed to this project"
manageContributionLinkLabel="Manage my contribution"
buttonLabel="Choose"
/>
</Marger>
</Container>
<KarlExampleTitle>Small Image Reward card</KarlExampleTitle>
<Container>
<Marger top="2" bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
{ label: 'Availability:', value: '200' },
]}
manageContributionDescription="You contributed to this project"
manageContributionLinkLabel="Manage my contribution"
buttonLabel="Choose"
imageProps={{
src: 'http://via.placeholder.com/200x200/caf4fe/caf4fe',
alt: '',
}}
/>
</Marger>
</Container>
<KarlExampleTitle>Small Image Reward card (tiny version)</KarlExampleTitle>
<Container>
<Marger top="2" bottom="2">
<RewardCard
titleAmount="For 00€"
subtitle="Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
description="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi."
infos={[
{ label: 'Contributors:', value: '35' },
{ label: 'Delivery:', value: 'January 2018' },
{ label: 'Availability:', value: '200' },
]}
manageContributionDescription="You contributed to this project"
manageContributionLinkLabel="Manage my contribution"
buttonLabel="Choose"
imageProps={{
src: 'http://via.placeholder.com/200x200/caf4fe/caf4fe',
alt: '',
}}
version="tiny"
/>
</Marger>
</Container>
</StyleRoot>
)