import React from "react" import PropTypes from "prop-types" import "./org-info.css" import { OutboundLink } from "gatsby-plugin-google-analytics" import { Divider, Button, Header, Icon, Popup } from "semantic-ui-react" const OrgInfo = ({ data }) => { const years = Object.keys(data.years) .map(year => { return ( <OutboundLink href={data.years[year].projects_url} rel="noreferrer" target="_blank" > <span className="org-info-year">{year}</span> </OutboundLink> ) }) .reverse() let technologies = data.technologies.map(tech => { return <span className="org-info-technology">{tech}</span> }) let topics = data.topics.map(topic => { return <span className="org-info-topic">{topic}</span> }) return ( <div className="org-info-container"> <div className="org-info-logo-container" style={{ backgroundColor: data.image_background_color, }} > <div className="org-info-logo" style={{ backgroundImage: `url(${data.image_url})`, }} ></div> </div> <div className="org-info-site-container"> <OutboundLink href={data.url} rel="noreferrer" target="_blank"> <Button icon labelPosition="left" color="orange"> <Icon name="world" /> Visit Site </Button> </OutboundLink> </div> <div className="org-info-site-container"> {data.twitter_url && ( <Popup content="Twitter" trigger={ <OutboundLink href={data.twitter_url} rel="noreferrer" target="_blank" > <Button icon> <Icon name="twitter" /> </Button> </OutboundLink> } /> )} {data.mailing_list && ( <Popup content="Mailing List" trigger={ <OutboundLink href={data.mailing_list} rel="noreferrer" target="_blank" > <Button icon color> <Icon name="envelope outline" /> </Button> </OutboundLink> } /> )} {data.irc_channel && ( <Popup content="Communication Channel" trigger={ <OutboundLink href={data.irc_channel} rel="noreferrer" target="_blank" > <Button icon> <Icon name="comment" /> </Button> </OutboundLink> } /> )} {data.contact_email && ( <Popup content="Contact Email" trigger={ <OutboundLink href={data.contact_email} rel="noreferrer" target="_blank" > <Button icon> <Icon name="mail" /> </Button> </OutboundLink> } /> )} {data.blog_url && ( <Popup content="Blog" trigger={ <OutboundLink href={data.blog_url} rel="noreferrer" target="_blank" > <Button icon> <Icon name="blogger" /> </Button> </OutboundLink> } /> )} </div> <div className="org-info-description-container">{data.description}</div> <center> <Divider horizontal className="org-info-divider"> <Header as="h4">Category</Header> </Divider> </center> <div className="org-info-category-container"> <span>{data.category}</span> </div> <center> <Divider horizontal className="org-info-divider"> <Header as="h4">Years</Header> </Divider> </center> <div className="org-info-years-container">{years}</div> <center> <Divider horizontal className="org-info-divider"> <Header as="h4">Technologies</Header> </Divider> </center> <div className="org-info-technologies-container">{technologies}</div> <center> <Divider horizontal className="org-info-divider"> <Header as="h4">Topics</Header> </Divider> </center> <div className="org-info-topics-container">{topics}</div> </div> ) } OrgInfo.propTypes = { data: PropTypes.object.isRequired, } export default OrgInfo