render() { return( <section> <Container fixed={this.props.fixed}> <Navigation light /> </Container> </section> ) }
render() { return ( <Container className="user-links"> <UserIcon href={config.userLinks.GitHub}> <FaGithubAlt style={iconStyle} /> </UserIcon> <UserIcon href={config.userLinks.Twitter}> <FaTwitter style={iconStyle} /> </UserIcon> </Container> ) }
render() { let message if (this.result === 'success') { message = <SuccessMessage>Thank you for your donation!</SuccessMessage> } else if (this.result === 'cancel') { message = <CancelMessage>Canceled.</CancelMessage> } return ( <Container> <Title>Donation</Title> <Description>Please support the development and maintenance of LambStatus!</Description> <Amounts> <Amount highlight={this.state.amount === 10} onClick={() => this.changeAmount(10)}>$10</Amount> <Amount highlight={this.state.amount === 50} onClick={() => this.changeAmount(50)}>$50</Amount> <Amount highlight={this.state.amount === 100} onClick={() => this.changeAmount(100)}>$100</Amount> </Amounts> <div> <Button onClick={event => this.redirectToCheckout(event)}>Donate</Button> {message} </div> <Note>(jumps to the Stripe page)</Note> </Container> ) }
render() { return ( <Container> <Title>Demo</Title> <InnerContainer> <Text> <FaCaretRight /> <Link href={statusPageDemoLink} target='_blank' > Status page: the page to tell your service's status to your users <FaExternalLink /> </Link> </Text> <Text> <FaCaretRight /> <Link href={adminPageDemoLink} target='_blank' > Admin page: the page to manage your service's status <FaExternalLink /> </Link> </Text> <GetStartedContainer> <GetStarted /> </GetStartedContainer> </InnerContainer> </Container> ); }
<Container> <Icon> {icon}
<Container> <InnerContainer> <Title>
const MajorModal = props => ( <FullScreenModal> <Container> <img src={`/static/img/roles/${props.major}.png`} alt={props.major} /> <MajorName>{majorAsText(props.major)}</MajorName> <MajorDetail>{content.major[props.major].fullDescription}</MajorDetail> <CloseButton onClick={props.hideModal}><i className="fa fa-times" /></CloseButton> </Container> </FullScreenModal> )
const TimelineItem = props => ( <Container active={props.onTime}> <TimelineBox center> <img src={`/static/img/landing/timeline/timeline-${props.item}${props.onTime ? '' : '-o'}.png`} /> </TimelineBox> <Title active={props.onTime}>{props.title}</Title> <TimelineDate>{props.date}</TimelineDate> </Container> )
const MainTemplate = ({ top, left, center }) => ( <Container> <TopArea>{top()}</TopArea> <BelowArea> <LeftArea>{left()}</LeftArea> <CenterArea>{center()}</CenterArea> </BelowArea> </Container> )
const MainStatistics = ({ datas }) => ( <Container> <Title>Statistics</Title> {datas.map(data => ( <Pannel key={data.label}> <Label>{data.label}</Label> <Data>{data.value}</Data> </Pannel> ))} </Container> )
const Major = ({ name }) => ( <Container> <InnerContainer> <HeaderArtwork /> <MajorImg src={`/static/img/roles/${name}.png`} /> <MajorName>{`web ${name}`}</MajorName> </InnerContainer> </Container> )
function SplashLoader({ loaded }) { return ( <Container loaded={loaded}> <Loader loaded={loaded} /> <LeftSection loaded={loaded} /> <RightSection loaded={loaded} /> </Container> ); }
const IndexPage = () => ( <Container> <Header> <Logo src={logo} alt="logo" /> <h2>Yeah, React!</h2> </Header> </Container> )
const SectionHeader = ({ title = '', subtitle = '' }) => ( <Container> <HeaderArtwork /> <Title>{title}</Title> <Subtitle>{subtitle}</Subtitle> </Container> )
const GlowingButton = props => ( <Container {...props}> <ButtonTitle>{props.children}</ButtonTitle> </Container> )