Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 2x | import Icon from 'antd/lib/icon'; import { Push } from 'connected-react-router'; import * as moment from 'moment'; import * as React from 'react'; import * as striptags from 'striptags'; import styled from 'styled-components'; import { IArticle } from '../../../../shared'; import { useBoolean } from '../../../customHooks'; import withRouter from '../../hoc/withRouter'; import { getArticlePath } from '../utils'; const Date = styled.div` font-size: 11px; color: #aaa; `; const Text = styled.div` display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } `; const Image = styled.div` ${(props: { path: string }) => ` background-image: url(${props.path}); background-size: cover; background-position: center; width: 15%; border-radius: 3px; margin: 0 20px 0px 0; `}; `; const Wrapper = styled.div` position: relative; cursor: pointer; height: 150px; overflow: hidden; `; const Content = styled.div` display: flex; margin: auto; padding: 10px; height: 100%; width: 100%; border-bottom: 1px solid #e4e4e4; `; const Overlay = styled.div` position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; font-size: 18px; flex-direction: column; `; interface IProps extends IArticle { push: Push; } export const ListItem = ({ push, ...article }: IProps) => { const { title, image, text, createdDateTime } = article; const hovered = useBoolean(false); const handleClick = () => push(getArticlePath(article)); return ( <Wrapper onMouseEnter={hovered.setTrue} onMouseLeave={hovered.setFalse} onClick={handleClick} > {hovered.value ? ( <Overlay> <div> <Icon type="plus" /> </div> <div>Přečíst článek</div> </Overlay> ) : null} <Content> <Image path={image} /> <div style={{ width: '100%' }}> <h3>{title}</h3> <Date>{moment(createdDateTime).format('DD.MM.YYYY')}</Date> <Text>{text ? striptags(text) : null}</Text> </div> </Content> </Wrapper> ); }; export default withRouter(ListItem); |