PTB-fe/pages/app/index.js

import React, { Component } from "react";
import BasePage from "@/components/Layout/BasePage";
import {
  Row,
  Col,
  Navbar,
  NavItem,
  NavLink,
  NavbarBrand,
  NavbarToggler,
  Nav,
  Collapse,
  Jumbotron,
  Button,
} from "reactstrap";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Link from "next/link";
import Login from "@/components/Main/Login";

const menu = [
  {
    title: "Home",
    path: "/app",
  },
  {
    title: "Buat Laporan",
    path: "/laporan/new",
  },
  {
    title: "Pemantauan",
    path: "/pemantauan",
  },
];
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

  static getInitialProps = ({ pathname }) => ({ pathname });

  toggleCollapse = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  };

  render() {
    return (
      <div>
        <Navbar className="navbar-color" expand="md" dark>
          <NavbarBrand href="/">
            <img
              className="width-133"
              src="/static/img/Logo-Sidali.png"
              alt="App Logo"
            />
          </NavbarBrand>
          <NavbarToggler onClick={this.toggleCollapse} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              {menu.map((e) => (
                <NavItem active={e.path === this.props.pathname ? true : false}>
                  <Link href={e.path}>
                    <NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
                  </Link>
                </NavItem>
              ))}
            </Nav>
          </Collapse>
        </Navbar>
        <ContentWrapper>
          <Jumbotron>
            <Row className="home-1">
              <Col
                lg={8}
                className="d-flex flex-column justify-content-center align-items-start"
              >
                <h1 className="display-5 home-2 txt-size">
                  Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi
                  pada Pendidikan Tinggi Akademik
                </h1>
                <p className="lead txt-size">
                  Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara
                  Pendidikan Tinggi Akademik
                </p>
                <hr className="my-4" />
                <p className="txt-size">
                  Disediakan kepada masyarakat untuk melaporkan pelanggaran
                  perguruan tinggi yang menyelenggarakan pendidikan tinggi
                  akademik
                </p>
                <p className="lead">
                  {/* <Link href="/laporan/new">
										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
									</Link> */}
                  <Link href="/laporan/new">
                    <span className="btn-radius">
                      <Button color="" className="btn-labeled">
                        <span className="btn-label">
                          <img
                            className="icon-buatlaporan"
                            src="/static/img/icon-buat-laporan.png"
                            alt="icon"
                          />
                        </span>
                        <text className="text-button-home-1 font-color-white">
                          Buat Laporan
                        </text>
                      </Button>
                    </span>
                  </Link>
                  <Link href="/pemantauan">
                    <span className="btn-radius">
                      <Button color className="btn-labeled-2">
                        <span className="btn-label">
                          <img
                            className="icon-pemantauan"
                            src="/static/img/icon-pemantauan.png"
                            alt="icon"
                          />
                        </span>
                        <text className="text-button-home-1 font-color-white">
                          Pemantauan
                        </text>
                      </Button>
                    </span>
                  </Link>
                </p>
                <div>
                  <img
                    className="ditbaga-logo"
                    src="/static/img/ditbaga-logo.png"
                    alt="applogo"
                  />
                </div>
              </Col>
              <Col>
                <Login />
              </Col>
            </Row>
          </Jumbotron>
        </ContentWrapper>
      </div>
    );
  }
}

App.Layout = BasePage;

export default App;