import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; import { colors } from 'ts/style/colors'; import { Banner } from 'ts/@next/components/banner'; import { Button } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; import { ModalContact } from 'ts/@next/components/modals/modal_contact'; import { Column, Section, WrapGrid } from 'ts/@next/components/newLayout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Heading, Paragraph } from 'ts/@next/components/text'; interface EventProps { title: string; date: string; signupUrl: string; imageUrl: string; } interface CommunityLinkProps { bgColor: string; title?: string; icon?: string; url: string; } const events: EventProps[] = [ { title: '0x London Meetup', date: 'October 20th 2018', imageUrl: '/images/@next/events/london.jpg', signupUrl: '#', }, { title: '0x Berlin Meetup', date: 'October 20th 2018', imageUrl: '/images/@next/events/berlin.jpg', signupUrl: '#', }, { title: '0x San Francisco Meetup', date: 'October 20th 2018', imageUrl: '/images/@next/events/sf.jpg', signupUrl: '#', }, ]; const communityLinks: CommunityLinkProps[] = [ { bgColor: '#1DA1F2', title: 'Twitter', icon: 'social-twitter', url: 'https://twitter.com/0xProject', }, { bgColor: '#FF4500', title: 'Reddit', icon: 'social-reddit', url: 'https://twitter.com/0xProject', }, { bgColor: '#7289DA', title: 'Twitter', icon: 'social-discord', url: 'https://twitter.com/0xProject', }, { bgColor: '#3B5998', title: 'Facebook', icon: 'social-fb', url: 'https://twitter.com/0xProject', }, { bgColor: '#181717', title: 'GitHub', icon: 'social-github', url: 'https://twitter.com/0xProject', }, { bgColor: '#003831', title: 'Newsletter', icon: 'social-newsletter', url: 'https://twitter.com/0xProject', }, ]; export class NextCommunity extends React.Component { public state = { isContactModalOpen: false, }; public render(): React.ReactNode { return (
Community The 0x community is a global, passionate group of crypto developers and enthusiasts. The official channels below provide a great forum for connecting and engaging with the community.
{_.map(communityLinks, (link: CommunityLinkProps, index: number) => ( ))}
Upcoming Events 0x meetups happen all over the world on a monthly basis and are hosted by devoted members of the community. Want to host a meetup in your city? Reach out for help finding a venue, connecting with local 0x mentors, and promoting your events. {_.map(events, (ev: EventProps, index: number) => ( ))}
); } public _onOpenContactModal = (): void => { this.setState({ isContactModalOpen: true }); } public _onDismissContactModal = (): void => { this.setState({ isContactModalOpen: false }); } } const Event: React.FunctionComponent = (event: EventProps) => ( {event.title} {event.date} ); const CommunityLink: React.FunctionComponent = (props: CommunityLinkProps) => ( {props.title} ); // Events const EventsWrapper = styled(Section)` display: flex; align-items: center; flex-direction: column; `; // Event const StyledEvent = styled.div` background-color: ${colors.brandDark}; width: calc((100% / 3) - 30px); text-align: left; height: 424px; margin-top: 130px; position: relative; `; const EventIcon = styled(Icon)` position: absolute; top: 30px; left: 30px; `; const EventImage = styled.img` width: 100%; height: 260px; object-fit: cover; `; const EventContent = styled.div` padding: 30px 30px; `; // Community Links const StyledCommunityLink = styled.a` background-color: ${(props: CommunityLinkProps) => props.bgColor}; color: ${colors.white}; width: 175px; height: 175px; text-align: center; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; `; const CommunityTitle = styled(Paragraph)` font-size: 20px; font-weight: 400; `; const CommunityIcon = styled(Icon)` margin-bottom: 20px; `; // Misc const LinkWrap = styled.div` display: inline-flex; margin-top: 60px; a + a { margin-left: 60px; } `;