64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Link, graphql } from 'gatsby'
|
|
import Img from 'gatsby-image'
|
|
|
|
export default class AssociationList extends React.Component {
|
|
render_association(association) {
|
|
return (
|
|
<Link className="association" to={association.path} key={association.id}>
|
|
{association.featured_media && association.featured_media.localFile && (
|
|
<div className="association-image">
|
|
<Img
|
|
fluid={association.featured_media.localFile.childImageSharp.fluid}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="association-text">
|
|
<h2 className="association-title">{association.title}</h2>
|
|
|
|
<div
|
|
className="association-description"
|
|
dangerouslySetInnerHTML={{ __html: association.excerpt }}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
const { associations, title } = this.props
|
|
|
|
return (
|
|
<section className="associations">
|
|
<h1 className="page-title">{title}</h1>
|
|
<p class="lead">Her burde det være en generell tekst om foreningene. Hva er en forening? Hvordan kan man bli med i en forening? Hva gjør foreningene? Kan jeg se alt som arrangeres av Kulturutvalget, for eksempel?</p>
|
|
<div className="association-list">
|
|
{associations.map(({ node: association }) =>
|
|
this.render_association(association)
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
}
|
|
|
|
AssociationList.propTypes = {
|
|
associations: PropTypes.arrayOf(PropTypes.object),
|
|
title: PropTypes.string,
|
|
}
|
|
|
|
export const pageQuery = graphql`
|
|
fragment AssociationListFields on wordpress__wp_associations {
|
|
id
|
|
path
|
|
title
|
|
excerpt
|
|
featured_media {
|
|
localFile {
|
|
...FluidImage
|
|
}
|
|
}
|
|
}
|
|
`
|