12345678910111213141516171819202122232425262728293031323334353637 |
- import styled from 'styled-components'
- const GalleryStyle = styled.div`
- border: 1px solid grey;
- #header {
- padding: 0 0.3em;
- background: lightgray;
- cursor: pointer
- }
- `
- class Gallery extends React.Component {
- state = {
- galleryOpen: false
- }
- openGallery = event => {
- this.setState({ galleryOpen: !this.state.galleryOpen })
- }
- render() {
- const { items, title } = this.props
- return (
- <GalleryStyle>
- <div onClick={this.openGallery} id="header">
- ‣ {items.length} {title} available (click to {this.state.galleryOpen ? 'hide' : 'see'})
- </div>
- <div style={{ display: this.state.galleryOpen ? 'block' : 'none' }} id="gallery">
- {items}
- </div>
- </GalleryStyle>
- )
- }
- }
- export default Gallery
|