const SourcesList = ({sources, handleSubcribeChange}) => { return ( <div className="sources-container row"> {sources.map(source => { const {name, description, url, category, language, country, isSubscribed} = source; return ( <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={source.id}> <SourceCard name={name} description={description} url={url} category={category} language={language} country={country} isSubscribed={isSubscribed} handleSubcribeChange={() => handleSubcribeChange(source)} /> </Col> ) })} </div> ); }
const NotFound = (props) => { useEffect(() => { document.title = "Not Found" }, []); const handelBackToHome = () => { props.history.push('/home'); } return ( <div className="notfound-container"> <Container> <Row> <Col xs={12} sm={10} md={8} lg={8} xl={8} xsOffset={0} smOffset={1} mdOffset={2} lgOffset={2} xlOffset={2}> <img src={logo} alt="404"></img> <h1>Oops! Page Not Be Found</h1> <p>Sorry but the page you are looking for does not exist, have been removed, name changed or is temporarily unavailable</p> <div className="link-container"> <div className="back-to-home-btn" onClick={() => handelBackToHome()} >Back to home page</div> </div> </Col> </Row> </Container> </div> ) }
<div className="login-page-container container-fluid"> <Row> <Col lg={12} xl={6} > <div className="left-section "> <Container> <Row> <Col xs={12} sm={12} md={12} lg={10} xl={8} mdOffset={0} lgOffset={1} xlOffset={2}> <div className="forms-container"> <Row> <Col col={5}> <div className='login-tap' onClick={() => this.handleTapChange('login')}>Login</div> </Col> <Col col={5} offset={2}> <div className='register-tap' onClick={() => this.handleTapChange('register')}>Register</div> </Col> </Row> <Row> <Col col={12}> {isLogin && <div className="login-form-content"> <Col xl={6} > <div className="right-section d-lg-none d-xl-block"> <img className="col-12 img-fluid" src={background} alt="logo"/>
const NewsList = ({news}) => { return ( <div className="news-container row"> {news.map(news => { const {title, description, content, url, urlToImage, source, publishedAt} = news; return ( <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={news.title}> <NewsCard title={title} description={description} content={content} url={url} urlToImage={urlToImage} source={source.name} publishedAt={publishedAt} /> </Col> ) })} </div> ); }
const NewsList = ({news}) => { return ( <div className="news-container row"> {news.map(news => { const {title, description, content, url, urlToImage, source, publishedAt} = news; return ( <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={news.title}> <NewsCard title={title} description={description} content={content} url={url} urlToImage={urlToImage} source={source.name} publishedAt={publishedAt} /> </Col> ) })} </div> ); }
const SourcesList = ({sources, handleSubcribeChange}) => { return ( <div className="sources-container row"> {sources.map(source => { const {name, description, url, category, language, country, isSubscribed} = source; return ( <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={source.id}> <SourceCard name={name} description={description} url={url} category={category} language={language} country={country} isSubscribed={isSubscribed} handleSubcribeChange={() => handleSubcribeChange(source)} /> </Col> ) })} </div> ); }
const NotFound = (props) => { useEffect(() => { document.title = "Not Found" }, []); const handelBackToHome = () => { props.history.push('/home'); } return ( <div className="notfound-container"> <Container> <Row> <Col xs={12} sm={10} md={8} lg={8} xl={8} xsOffset={0} smOffset={1} mdOffset={2} lgOffset={2} xlOffset={2}> <img src={logo} alt="404"></img> <h1>Oops! Page Not Be Found</h1> <p>Sorry but the page you are looking for does not exist, have been removed, name changed or is temporarily unavailable</p> <div className="link-container"> <div className="back-to-home-btn" onClick={() => handelBackToHome()} >Back to home page</div> </div> </Col> </Row> </Container> </div> ) }
<div className="login-page-container container-fluid"> <Row> <Col lg={12} xl={6} > <div className="left-section "> <Container> <Row> <Col xs={12} sm={12} md={12} lg={10} xl={8} mdOffset={0} lgOffset={1} xlOffset={2}> <div className="forms-container"> <Row> <Col col={5}> <div className='login-tap' onClick={() => this.handleTapChange('login')}>Login</div> </Col> <Col col={5} offset={2}> <div className='register-tap' onClick={() => this.handleTapChange('register')}>Register</div> </Col> </Row> <Row> <Col col={12}> {isLogin && <div className="login-form-content"> <Col xl={6} > <div className="right-section d-lg-none d-xl-block"> <img className="col-12 img-fluid" src={background} alt="logo"/>