82 lines
1.8 KiB
JavaScript
82 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import emotion from 'preact-emotion';
|
|
import { graphql, compose } from 'react-apollo';
|
|
import gql from 'graphql-tag';
|
|
import chunk from 'lodash.chunk';
|
|
import remcalc from 'remcalc';
|
|
|
|
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
|
|
|
|
import {
|
|
ServiceCategory,
|
|
ServiceName,
|
|
ServiceDescription,
|
|
Service,
|
|
Overlay
|
|
} from '../components';
|
|
|
|
const Container = emotion('div')`
|
|
padding-top: ${remcalc(30)};
|
|
background-color: #ffffff;
|
|
`;
|
|
|
|
const getHeader = gql`
|
|
{
|
|
categories @client {
|
|
name
|
|
slug
|
|
}
|
|
services @client {
|
|
name
|
|
description
|
|
category
|
|
slug
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Services = ({ categories = [] }) => (
|
|
<Overlay>
|
|
<Container>
|
|
<Grid>
|
|
{chunk(categories, 4).map(chunk => (
|
|
<Row>
|
|
{chunk.map(({ name, services }) => (
|
|
<Col xs={12} sm={6} md={4} lg={3}>
|
|
<ServiceCategory>{name}</ServiceCategory>
|
|
{services.map(({ name, description }) => (
|
|
<Service>
|
|
<ServiceName>{name}</ServiceName>
|
|
<ServiceDescription>{description}</ServiceDescription>
|
|
</Service>
|
|
))}
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Overlay>
|
|
);
|
|
|
|
export default compose(
|
|
graphql(getHeader, {
|
|
props: ({ data }) => {
|
|
const {
|
|
categories = [],
|
|
services = [],
|
|
loading = false,
|
|
error = null
|
|
} = data;
|
|
|
|
const _categories = categories.map(({ slug, ...category }) => ({
|
|
...category,
|
|
services: services.filter(({ category }) => category === slug),
|
|
slug
|
|
}));
|
|
|
|
return { categories: _categories, loading, error };
|
|
}
|
|
})
|
|
)(Services);
|