import { Button } from 'antd'; import styled from 'styled-components'; import { PlusOutlined } from '@ant-design/icons'; import newTemplate from '../../Assets/Images/new_template.svg'; import { useHistory, useLocation, useRouteMatch } from 'react-router'; import { ReactNode } from 'react'; interface PreviewProps { image?: string; skeleton?: ReactNode; id: string; } const PreviewContainer = styled.div` flex: 1 1 0%; border: 0.4px solid rgb(225, 230, 242); filter: drop-shadow(rgba(0, 0, 0, 0.08) 4px 4px 4px); max-height: 500px; min-height: 150px; height: min-content; max-width: 280px; overflow: hidden; border-radius: 4px; margin-bottom: 25px; transition: all 0.2s ease 0s; position: relative; text-align: center; margin: 0 auto; .hoverItem { display: none; position: absolute; inset: 0px; background: rgba(255, 255, 255, 0.9); padding: 20px; flex-direction: column; .content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; } } .hoverItem.alwaysActive { display: flex; background: unset; } &:hover { box-shadow: rgb(0 0 0 / 15%) 0px 5px 20px; .hoverItem { display: flex; } } img, .newTemplate { max-width: 280px; } .newTemplate { max-height: 500px; min-height: 250px; display: flex; justify-content: center; align-items: center; padding-bottom: 60px; } .btn-choose { padding: 8px 16px; text-transform: capitalize; } `; export const NewItem = () => { const history = useHistory(); const { path } = useRouteMatch(); const onClick = () => { history.push(`${path}/template/new`); }; return ( <PreviewContainer> <div className="newTemplate"> <PlusOutlined style={{ fontSize: '40px' }} /> </div> <div className="hoverItem alwaysActive"> <div className="content"> <Button onClick={onClick} size="large" type="primary" className="btn-choose"> New Template </Button> </div> </div> <div> <img src={newTemplate} alt="img new template" /> </div> </PreviewContainer> ); }; const Preview = ({ image, id, skeleton }: PreviewProps) => { const history = useHistory(); const { path } = useRouteMatch(); const onClick = () => { history.push(`${path}/template/${id}`); }; return ( <PreviewContainer> {skeleton ? ( <div style={{ height: '350px', minWidth: '280px', maxWidth: '280px', padding: '24px 24px' }}>{skeleton}</div> ) : ( <img height="350px" src={image} alt="preview" /> )} <div className="hoverItem"> <div className="content"> <Button onClick={onClick} size="large" type="primary" className="btn-choose"> choose </Button> </div> </div> </PreviewContainer> ); }; export { Preview };