text: import React from "react";
  // nodejs library that concatenates classes
  import classNames from "classnames";
  // @material-ui/core components
  import { makeStyles } from "@material-ui/core/styles";
  
  // core components
  import Header from "components/Header/Header.js";
  import Footer from "components/Footer/Footer.js";
  import GridContainer from "components/Grid/GridContainer.js";
  import GridItem from "components/Grid/GridItem.js";
  import Button from "components/CustomButtons/Button.js";
  import HeaderLinks from "components/Header/HeaderLinks.js";
  import Parallax from "components/Parallax/Parallax.js";
  
  import styles from "assets/jss/material-kit-react/views/landingPage.js";
  
  // import CardSection from "./Sections/CardSection.js";
  import CardArticle from "components/Article/ArticleCard";
  
  //loader
  import Loader from 'components/Backdrop/Loader.js';
  
  //scrollup
  import PropTypes from 'prop-types';
  import useScrollTrigger from '@material-ui/core/useScrollTrigger';
  import Fab from '@material-ui/core/Fab';
  import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
  import Zoom from '@material-ui/core/Zoom';
  import Toolbar from '@material-ui/core/Toolbar';
  
  const dashboardRoutes = [];
  
  const useStyles = makeStyles(styles);
  
  function ScrollTop(props) {
    const classes = useStyles()
    const { children, window } = props;
    
    const trigger = useScrollTrigger({
      target: window ? window() : undefined,
      disableHysteresis: true,
      threshold: 100,
    });
    const handleClick = (event) => {
      const anchor = (event.target.ownerDocument || document).querySelector('#back-to-top-anchor');
    
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    };
    return (
      <Zoom in={trigger}>
        <div onClick={handleClick} role="presentation" className={classes.btnScroll}>
          {children}
        </div>
      </Zoom>
    );
  }
  
  ScrollTop.propTypes = {
    children: PropTypes.element.isRequired,
    window: PropTypes.func,
  };
  
  
  export default function DetailArticles(props) {
    const [open, setOpen] = React.useState(true);
    const classes = useStyles();
    const { ...rest } = props;
  
    React.useEffect(() => {
      setTimeout(() => {
          setOpen(false);
      }, [1500])
    }, [])
  
    return (
      <div>
        <Loader open={open} />
        <Header
          color="dark"
          routes={dashboardRoutes}
          brand="PPM Wiriosoedarmo Gombong"
          rightLinks={<HeaderLinks />}
          fixed
          changeColorOnScroll={{
            height: 400,
            color: "white"
          }}
          {...rest}
        />
        <Toolbar id="back-to-top-anchor" />
        <Parallax filter image={"https://cdn.ymaws.com/www.itsmfusa.org/resource/resmgr/images/more_images/news-3.jpg"}>        
          <div className={classes.container}>
            <GridContainer>
              <GridItem xs={12} sm={12} md={6}>
                <h1 className={classes.title}>PPM Wiriosoedarmo Stories</h1>
                <h4>
                  If great nations starts from good quality people,
                  we believe that good quality people starts from writing.
                </h4>
                <br />
                <Button
                  color="danger"
                  size="lg"
                  href="https://www.youtube.com/channel/UCMuxxsGqi1x9H3CxRC0OAcg"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i className="fas fa-play" />
                  Watch video
                </Button>
              </GridItem>
            </GridContainer>
          </div>
        </Parallax>
        <div className={classNames(classes.main)}>
          <div className={classes.container}>
            <ScrollTop {...props}>
              <Fab color="secondary" size="small" aria-label="scroll back to top">
                <KeyboardArrowUpIcon />
              </Fab>
            </ScrollTop>
            <CardArticle />
          </div>
        </div>
        <Footer />
      </div>
    );
  }
  