import React from 'react'; import { Link } from 'react-router-dom'; import { Avatar, Image } from 'antd'; import styled from 'styled-components/macro'; import { useTransition, animated, config } from 'react-spring'; import TimeAgo from 'timeago-react'; import * as timeago from 'timeago.js'; import he from 'timeago.js/lib/lang/he'; timeago.register('he', he); function PictureCardList({ pictures }) { const transitions = useTransition(pictures, (picture) => picture?.id, { config: config.gentle, from: { opacity: 0, transform: 'translate3d(25%, 0%, 0px)' }, enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' }, leave: { opacity: 0, height: 0, transform: 'translate3d(-25%, 0px, 0px)' }, }); return ( <> {transitions.map(({ item: picture, props, key }) => ( <Card key={key} style={props}> <Card.Info> <Link to={`/protest/${picture.protestId}`}> <Card.Info.Title> {picture.protestName} {picture.cityName && `, ${picture.cityName}`} </Card.Info.Title> </Link> {picture.uploaderName && ( <Card.Info.Subtitle> <Avatar size={21} src={picture.userAvatar || 'https://1km.co.il/anonymousPofile.png'} style={{ marginLeft: 6 }} /> {picture.uploaderName} </Card.Info.Subtitle> )} {picture.description && <Card.Description>{picture.description}</Card.Description>} <Card.Info.Timestamp> <TimeAgo datetime={picture.createdAt} locale="he" /> </Card.Info.Timestamp> </Card.Info> <Card.Image src={picture.imageUrl} alt="" /> </Card> ))} </> ); } export default PictureCardList; const Card = styled(animated.div)` width: 100%; background: #fff; margin: 10px 0; border-radius: 2px; border: 1px solid #e3e3e3; `; Card.Image = styled(Image)` width: 100%; height: auto; cursor: pointer; .ant-image-img { height: 100%; object-fit: cover; object-position: center; border-radius: 0 0 2px 2px; } `; Card.Info = styled.div` display: grid; grid-template-columns: 1fr 90px; padding: 18px 24px; align-items: baseline; `; Card.Info.Title = styled.h3` margin-bottom: 7.5px; font-size: 17px; font-weight: 600; grid-column: 1/2; color: #27235a; text-decoration: underline; text-decoration-color: #27235a38; text-underline-offset: 4px; @media (min-width: 402px) { font-size: 18px; } `; Card.Info.Subtitle = styled.h4` font-size: 15px; grid-column: 1/2; `; Card.Info.Timestamp = styled.span` grid-column: 2/-1; grid-row: 1; text-align: left; font-size: 13px; `; Card.Description = styled.p` grid-column: 1 / 3; margin-bottom: 0; font-size: 14px; `;