102 lines
2.3 KiB
JavaScript
102 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import emotion from 'preact-emotion';
|
|
import { graphql, compose } from 'react-apollo';
|
|
import gql from 'graphql-tag';
|
|
import remcalc from 'remcalc';
|
|
|
|
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
|
|
|
|
import {
|
|
ServiceCategory,
|
|
ServiceName,
|
|
ServiceDescription,
|
|
Service,
|
|
Overlay,
|
|
Anchor,
|
|
Sup
|
|
} from '../components';
|
|
|
|
const Container = emotion('div')`
|
|
padding-top: ${remcalc(30)};
|
|
background-color: #ffffff;
|
|
`;
|
|
|
|
const CategoryWrapper = emotion(Col)`
|
|
margin-bottom: ${remcalc(48)};
|
|
`;
|
|
|
|
const sliptTag = tag => tag.split('=').map(n => n.replace(/'/g, ''));
|
|
|
|
const isNew = tag => sliptTag(tag)[0] === 'is-new';
|
|
|
|
const formatTag = tag => {
|
|
if (sliptTag(tag)[0] === 'note') {
|
|
return sliptTag(tag)[1];
|
|
}
|
|
|
|
if (sliptTag(tag)[0] === 'is-new') {
|
|
return 'New!';
|
|
}
|
|
|
|
return tag;
|
|
};
|
|
|
|
const GetProducts = gql`
|
|
{
|
|
categories {
|
|
name
|
|
services {
|
|
name
|
|
slug
|
|
url
|
|
tags
|
|
description
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Services = ({ expanded = false, categories = [], loading }) =>
|
|
expanded ? (
|
|
<Overlay>
|
|
<Container>
|
|
<Grid>
|
|
<Row>
|
|
{!loading &&
|
|
categories.map(({ name, services }) => (
|
|
<CategoryWrapper xs="12" sm="6" md="4">
|
|
<ServiceCategory>{name}</ServiceCategory>
|
|
{services.map(({ name, description, url, tags }) => (
|
|
<Service>
|
|
<ServiceName>
|
|
<Anchor href={url}>{name}</Anchor>
|
|
{tags
|
|
? tags.map(tag => (
|
|
<Sup new={isNew(tag)}>{formatTag(tag)}</Sup>
|
|
))
|
|
: null}
|
|
</ServiceName>
|
|
<ServiceDescription>{description}</ServiceDescription>
|
|
</Service>
|
|
))}
|
|
</CategoryWrapper>
|
|
))}
|
|
</Row>
|
|
</Grid>
|
|
</Container>
|
|
</Overlay>
|
|
) : null;
|
|
|
|
export default compose(
|
|
graphql(GetProducts, {
|
|
options: () => ({
|
|
ssr: false
|
|
}),
|
|
props: ({ data: { categories = [], loading = false, error = null } }) => ({
|
|
categories,
|
|
loading,
|
|
error
|
|
})
|
|
})
|
|
)(Services);
|