| @@ -0,0 +1,120 @@ | |||||
| import React from "react"; | |||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | |||||
| // nodejs library to set properties for components | |||||
| import PropTypes from "prop-types"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import makeStyles from "@material-ui/core/styles/makeStyles"; | |||||
| import Button from "@material-ui/core/Button"; | |||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Cardstyles from "assets/jss/nextjs-material-kit/components/cardStyle.js"; | |||||
| import CardBodystyles from "assets/jss/nextjs-material-kit/components/cardBodyStyle.js"; | |||||
| import CardFooterstyles from "assets/jss/nextjs-material-kit/components/cardFooterStyle.js"; | |||||
| import CardHeaderstyles from "assets/jss/nextjs-material-kit/components/cardHeaderStyle.js"; | |||||
| import buttonStyle from "assets/jss/nextjs-material-kit/components/buttonStyle.js"; | |||||
| const CarduseStyles = makeStyles(Cardstyles); | |||||
| const CardBodyuseStyles = makeStyles(CardBodystyles); | |||||
| const CardFooteruseStyles = makeStyles(CardFooterstyles); | |||||
| const CardHeaderuseStyles = makeStyles(CardHeaderstyles); | |||||
| const makeComponentStyles = makeStyles(() => ({ | |||||
| ...buttonStyle | |||||
| })); | |||||
| async function Card(props) { | |||||
| const classes = CarduseStyles(); | |||||
| const { className, children, plain, carousel, ...rest } = props; | |||||
| const cardClasses = classNames({ | |||||
| [classes.card]: true, | |||||
| [classes.cardPlain]: plain, | |||||
| [classes.cardCarousel]: carousel, | |||||
| [className]: className !== undefined | |||||
| }); | |||||
| return ( | |||||
| <div className={cardClasses} {...rest}> | |||||
| {children} | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| async function CardBody(props) { | |||||
| const classes = CardBodyuseStyles(); | |||||
| const { className, children, ...rest } = props; | |||||
| const cardBodyClasses = classNames({ | |||||
| [classes.cardBody]: true, | |||||
| [className]: className !== undefined | |||||
| }); | |||||
| return ( | |||||
| <div className={cardBodyClasses} {...rest}> | |||||
| {children} | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| async function CardFooter(props) { | |||||
| const classes = CardFooteruseStyles(); | |||||
| const { className, children, ...rest } = props; | |||||
| const cardFooterClasses = classNames({ | |||||
| [classes.cardFooter]: true, | |||||
| [className]: className !== undefined | |||||
| }); | |||||
| return ( | |||||
| <div className={cardFooterClasses} {...rest}> | |||||
| {children} | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| async function CardHeader(props) { | |||||
| const classes = CardHeaderuseStyles(); | |||||
| const { className, children, color, plain, ...rest } = props; | |||||
| const cardHeaderClasses = classNames({ | |||||
| [classes.cardHeader]: true, | |||||
| [classes[color + "CardHeader"]]: color, | |||||
| [classes.cardHeaderPlain]: plain, | |||||
| [className]: className !== undefined | |||||
| }); | |||||
| return ( | |||||
| <div className={cardHeaderClasses} {...rest}> | |||||
| {children} | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| Card.propTypes = { | |||||
| className: PropTypes.string, | |||||
| plain: PropTypes.bool, | |||||
| carousel: PropTypes.bool, | |||||
| children: PropTypes.node | |||||
| }; | |||||
| CardBody.propTypes = { | |||||
| className: PropTypes.string, | |||||
| children: PropTypes.node | |||||
| }; | |||||
| CardFooter.propTypes = { | |||||
| className: PropTypes.string, | |||||
| children: PropTypes.node | |||||
| }; | |||||
| CardHeader.propTypes = { | |||||
| className: PropTypes.string, | |||||
| color: PropTypes.oneOf(["warning", "success", "danger", "info", "primary"]), | |||||
| plain: PropTypes.bool, | |||||
| children: PropTypes.node | |||||
| }; | |||||
| module.exports = { | |||||
| Card: Card, | |||||
| CardBody: CardBody, | |||||
| CardFooter: CardFooter, | |||||
| CardHeader: CardHeader, | |||||
| }; | |||||
| @@ -1,35 +0,0 @@ | |||||
| import React from "react"; | |||||
| // nodejs library to set properties for components | |||||
| import PropTypes from "prop-types"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import styles from "assets/jss/nextjs-material-kit/components/badgeStyle.js"; | |||||
| const useStyles = makeStyles(styles); | |||||
| export default function Badge(props) { | |||||
| const classes = useStyles(); | |||||
| const { color, children } = props; | |||||
| return ( | |||||
| <span className={classes.badge + " " + classes[color]}>{children}</span> | |||||
| ); | |||||
| } | |||||
| Badge.defaultProps = { | |||||
| color: "gray" | |||||
| }; | |||||
| Badge.propTypes = { | |||||
| color: PropTypes.oneOf([ | |||||
| "primary", | |||||
| "warning", | |||||
| "danger", | |||||
| "success", | |||||
| "info", | |||||
| "rose", | |||||
| "gray" | |||||
| ]), | |||||
| children: PropTypes.node | |||||
| }; | |||||
| @@ -1,25 +0,0 @@ | |||||
| import React from "react"; | |||||
| // mterial-ui components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| const styles = { | |||||
| clearfix: { | |||||
| "&:after,&:before": { | |||||
| display: "table", | |||||
| content: '" "' | |||||
| }, | |||||
| "&:after": { | |||||
| clear: "both" | |||||
| } | |||||
| } | |||||
| }; | |||||
| const useStyles = makeStyles(styles); | |||||
| export default function Clearfix() { | |||||
| const classes = useStyles(); | |||||
| return <div className={classes.clearfix} />; | |||||
| } | |||||
| Clearfix.propTypes = {}; | |||||
| @@ -1,41 +0,0 @@ | |||||
| import React from "react"; | |||||
| // nodejs library to set properties for components | |||||
| import PropTypes from "prop-types"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import LinearProgress from "@material-ui/core/LinearProgress"; | |||||
| // core components | |||||
| import styles from "assets/jss/nextjs-material-kit/components/customLinearProgressStyle.js"; | |||||
| const useStyles = makeStyles(styles); | |||||
| export default function CustomLinearProgress(props) { | |||||
| const classes = useStyles(); | |||||
| const { color, ...rest } = props; | |||||
| return ( | |||||
| <LinearProgress | |||||
| {...rest} | |||||
| classes={{ | |||||
| root: classes.root + " " + classes[color + "Background"], | |||||
| bar: classes.bar + " " + classes[color] | |||||
| }} | |||||
| /> | |||||
| ); | |||||
| } | |||||
| CustomLinearProgress.defaultProps = { | |||||
| color: "gray" | |||||
| }; | |||||
| CustomLinearProgress.propTypes = { | |||||
| color: PropTypes.oneOf([ | |||||
| "primary", | |||||
| "warning", | |||||
| "danger", | |||||
| "success", | |||||
| "info", | |||||
| "rose", | |||||
| "gray" | |||||
| ]) | |||||
| }; | |||||
| @@ -1,104 +0,0 @@ | |||||
| import React from "react"; | |||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | |||||
| // nodejs library to set properties for components | |||||
| import PropTypes from "prop-types"; | |||||
| // material-ui components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import Tabs from "@material-ui/core/Tabs"; | |||||
| import Tab from "@material-ui/core/Tab"; | |||||
| import Icon from "@material-ui/core/Icon"; | |||||
| // core components | |||||
| import Card from "components/Card/Card.js"; | |||||
| import CardBody from "components/Card/CardBody.js"; | |||||
| import CardHeader from "components/Card/CardHeader.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/components/customTabsStyle.js"; | |||||
| const useStyles = makeStyles(styles); | |||||
| export default function CustomTabs(props) { | |||||
| const [value, setValue] = React.useState(0); | |||||
| const handleChange = (event, value) => { | |||||
| setValue(value); | |||||
| }; | |||||
| const classes = useStyles(); | |||||
| const { headerColor, plainTabs, tabs, title, rtlActive } = props; | |||||
| const cardTitle = classNames({ | |||||
| [classes.cardTitle]: true, | |||||
| [classes.cardTitleRTL]: rtlActive | |||||
| }); | |||||
| return ( | |||||
| <Card plain={plainTabs}> | |||||
| <CardHeader color={headerColor} plain={plainTabs}> | |||||
| {title !== undefined ? <div className={cardTitle}>{title}</div> : null} | |||||
| <Tabs | |||||
| value={value} | |||||
| onChange={handleChange} | |||||
| classes={{ | |||||
| root: classes.tabsRoot, | |||||
| indicator: classes.displayNone | |||||
| }} | |||||
| > | |||||
| {tabs.map((prop, key) => { | |||||
| var icon = {}; | |||||
| if (prop.tabIcon) { | |||||
| icon = { | |||||
| icon: | |||||
| typeof prop.tabIcon === "string" ? ( | |||||
| <Icon>{prop.tabIcon}</Icon> | |||||
| ) : ( | |||||
| <prop.tabIcon /> | |||||
| ) | |||||
| }; | |||||
| } | |||||
| return ( | |||||
| <Tab | |||||
| classes={{ | |||||
| root: classes.tabRootButton, | |||||
| label: classes.tabLabel, | |||||
| selected: classes.tabSelected, | |||||
| wrapper: classes.tabWrapper | |||||
| }} | |||||
| key={key} | |||||
| label={prop.tabName} | |||||
| {...icon} | |||||
| /> | |||||
| ); | |||||
| })} | |||||
| </Tabs> | |||||
| </CardHeader> | |||||
| <CardBody> | |||||
| {tabs.map((prop, key) => { | |||||
| if (key === value) { | |||||
| return <div key={key}>{prop.tabContent}</div>; | |||||
| } | |||||
| return null; | |||||
| })} | |||||
| </CardBody> | |||||
| </Card> | |||||
| ); | |||||
| } | |||||
| CustomTabs.propTypes = { | |||||
| headerColor: PropTypes.oneOf([ | |||||
| "warning", | |||||
| "success", | |||||
| "danger", | |||||
| "info", | |||||
| "primary", | |||||
| "rose" | |||||
| ]), | |||||
| title: PropTypes.string, | |||||
| tabs: PropTypes.arrayOf( | |||||
| PropTypes.shape({ | |||||
| tabName: PropTypes.string.isRequired, | |||||
| tabIcon: PropTypes.object, | |||||
| tabContent: PropTypes.node.isRequired | |||||
| }) | |||||
| ), | |||||
| rtlActive: PropTypes.bool, | |||||
| plainTabs: PropTypes.bool | |||||
| }; | |||||
| @@ -1,28 +0,0 @@ | |||||
| import React from "react"; | |||||
| // @material-ui/core components | |||||
| import List from "@material-ui/core/List"; | |||||
| import ListItem from "@material-ui/core/ListItem"; | |||||
| import ListItemText from "@material-ui/core/ListItemText"; | |||||
| // @material-ui icons | |||||
| // core components | |||||
| import Card from "components/Card/Card.js"; | |||||
| import CardHeader from "components/Card/CardHeader.js"; | |||||
| import cardBlog5 from "assets/img/examples/studio-1.jpg"; | |||||
| export default function Motor() { | |||||
| return ( | |||||
| <Card style={{ width: "20rem" }}> | |||||
| <CardHeader color="info">All New Nmax</CardHeader> | |||||
| <List component="nav"> | |||||
| <ListItem> | |||||
| <img | |||||
| style={{ height: "180px", width: "100%", display: "block" }} | |||||
| src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </ListItem> | |||||
| </List> | |||||
| </Card> | |||||
| ); | |||||
| } | |||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,9 +1,6 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| @@ -1,15 +1,9 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
| // Component | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
| import NavPills from "components/NavPills/NavPills.js"; | import NavPills from "components/NavPills/NavPills.js"; | ||||
| @@ -1,19 +1,12 @@ | |||||
| import React, { useState, useEffect } from 'react'; | |||||
| // @material-ui/core components | |||||
| import React from 'react'; | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| import parse from 'react-html-parser'; | |||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
| import CardHeader from "components/Card/CardHeader.js"; | import CardHeader from "components/Card/CardHeader.js"; | ||||
| const useStyles = makeStyles(styles); | |||||
| const DataCarrer = function ({ backend, detailcarrer, ...props }) { | const DataCarrer = function ({ backend, detailcarrer, ...props }) { | ||||
| const classes = useStyles(); | |||||
| const carrer = detailcarrer.map((data) => { | const carrer = detailcarrer.map((data) => { | ||||
| return ( | return ( | ||||
| <Card> | <Card> | ||||
| @@ -24,9 +17,7 @@ const DataCarrer = function ({ backend, detailcarrer, ...props }) { | |||||
| </div> | </div> | ||||
| <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | ||||
| <h5 align="center" align="justify"> | <h5 align="center" align="justify"> | ||||
| <div> | |||||
| { parse () } | |||||
| </div> | |||||
| parse({data.description}) | |||||
| </h5> | </h5> | ||||
| </CardBody> | </CardBody> | ||||
| </Card> | </Card> | ||||
| @@ -1,270 +0,0 @@ | |||||
| import React from "react"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| // Component | |||||
| import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
| import Clearfix from "components/Clearfix/Clearfix.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import Grid from '@material-ui/core/Grid'; | |||||
| import Paper from '@material-ui/core/Paper'; | |||||
| import CardBody from "components/Card/CardBody.js"; | |||||
| import Card from "components/Card/Card.js"; | |||||
| import Button from "components/CustomButtons/Button.js"; | |||||
| // react component for creating beautiful carousel | |||||
| import Carousel from "react-slick"; | |||||
| // @material-ui/icons | |||||
| import LocationOn from "@material-ui/icons/LocationOn"; | |||||
| import image1 from "assets/img/bg.jpg"; | |||||
| import image2 from "assets/img/bg2.png"; | |||||
| import image3 from "assets/img/bg3.jpg"; | |||||
| // import "assets/css/hover.css"; | |||||
| // import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js"; | |||||
| const useStyles = makeStyles(styles); | |||||
| const DataSnackbarContent = function() { | |||||
| const classes = useStyles(); | |||||
| return ( | |||||
| <div className={classes.section} id="notifications"> | |||||
| <SnackbarContent | |||||
| message={ | |||||
| <span> | |||||
| <b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. | |||||
| </span> | |||||
| } | |||||
| align="center" | |||||
| color="danger" | |||||
| icon="info_outline" | |||||
| /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| const DataCarousel = function ({ carousel, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const settings = { | |||||
| dots: true, | |||||
| infinite: true, | |||||
| speed: 500, | |||||
| slidesToShow: 1, | |||||
| slidesToScroll: 1, | |||||
| autoplay: true, | |||||
| time: 5 | |||||
| }; | |||||
| return ( | |||||
| <div className={classes.section} id="notifications"> | |||||
| <div className={classes.section}> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <Card carousel> | |||||
| <Carousel {...settings}> | |||||
| <div> | |||||
| <img src={image1} alt="First slide" className="slick-image" /> | |||||
| </div> | |||||
| <div> | |||||
| <img src={image2} alt="Second slide" className="slick-image"/> | |||||
| </div> | |||||
| <div> | |||||
| <img src={image3} alt="Third slide" className="slick-image" /> | |||||
| </div> | |||||
| </Carousel> | |||||
| </Card> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| const DataService = function ({ service, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const services = service.map((data) => ( | |||||
| <GridContainer justify="center"> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src={data.img} | |||||
| /> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| </GridContainer> | |||||
| )); | |||||
| return ( | |||||
| <div className={classes.section} id="notifications"> | |||||
| <div align="center"> | |||||
| <h2>Our Service</h2> | |||||
| </div> | |||||
| <div> | |||||
| {services} | |||||
| </div> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| const DataBusinessPartner = function ({ businessPartners, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const settings = { | |||||
| dots: true, | |||||
| infinite: true, | |||||
| speed: 500, | |||||
| slidesToShow: 1, | |||||
| slidesToScroll: 1, | |||||
| autoplay: true, | |||||
| time: 5 | |||||
| }; | |||||
| return ( | |||||
| <div className={classes.section} id="notifications"> | |||||
| <div align="center"> | |||||
| <h2>Our Business Partner</h2> | |||||
| </div> | |||||
| <GridContainer justify="center"> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "270px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "270px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "250px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "330px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "330px", padding:"20px", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png" | |||||
| /> | |||||
| </div> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| </GridContainer> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| module.exports = { | |||||
| DataSnackbarContent: DataSnackbarContent, | |||||
| DataCarousel: DataCarousel, | |||||
| DataService: DataService, | |||||
| DataBusinessPartner: DataBusinessPartner, | |||||
| }; | |||||
| @@ -1,11 +1,8 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import Grid from '@material-ui/core/Grid'; | import Grid from '@material-ui/core/Grid'; | ||||
| import Paper from '@material-ui/core/Paper'; | |||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| @@ -1,15 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // Component | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| // react component for creating beautiful carousel | |||||
| import Carousel from "react-slick"; | import Carousel from "react-slick"; | ||||
| const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
| @@ -1,15 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // Component | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| // react component for creating beautiful carousel | |||||
| import Carousel from "react-slick"; | import Carousel from "react-slick"; | ||||
| import image1 from "assets/img/core1.png"; | import image1 from "assets/img/core1.png"; | ||||
| @@ -1,6 +1,4 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| @@ -1,161 +0,0 @@ | |||||
| import React from "react"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| // component | |||||
| import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
| import Clearfix from "components/Clearfix/Clearfix.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
| import Paper from '@material-ui/core/Paper'; | |||||
| import Grid from '@material-ui/core/Grid'; | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import Card from "components/Card/Card.js"; | |||||
| import CardBody from "components/Card/CardBody.js"; | |||||
| import Button from "components/CustomButtons/Button.js"; | |||||
| import Paginations from "components/Pagination/Pagination.js"; | |||||
| const useStyles = makeStyles(styles); | |||||
| const LatestNews = function ({ news, ...props }) { | |||||
| const classes = useStyles(); | |||||
| return ( | |||||
| <div className={classes.section} id="notifications"> | |||||
| <SnackbarContent | |||||
| message={ | |||||
| <span> | |||||
| <b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. | |||||
| </span> | |||||
| } | |||||
| align="center" | |||||
| color="danger" | |||||
| icon="info_outline" | |||||
| /> | |||||
| <Clearfix /> | |||||
| <div align="center"> | |||||
| <h2>Latest News</h2> | |||||
| </div> | |||||
| <GridContainer justify="center"> | |||||
| <Grid align="center" style={{padding:"5px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://www.yamaha-motor.co.id/uploads/content/2021012915132285551O25635.jpg" | |||||
| /> | |||||
| <CardBody> | |||||
| <h4 className={classes.cardTitle}>Dance Seru sambil Menang Banyak? Yuk...</h4> | |||||
| <p>Jakarta – Let’s Gear Up! PT Yamaha Indonesia Motor Manufacturing (PT YIMM) mengajak para generasi muda...</p> | |||||
| <Button color="info">Read More</Button> | |||||
| </CardBody> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"5px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://www.yamaha-motor.co.id/uploads/content/2021012810494925493U23162.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| <CardBody> | |||||
| <h4 className={classes.cardTitle}>Makin Agresif, Ini Warna Baru MT-25 !</h4> | |||||
| <p>Makin Agresif, Ini Warna Baru MT-25 ! Yamaha gencar melakukan penyegaran produk-produknya...</p> | |||||
| <Button color="info">Read More</Button> | |||||
| </CardBody> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"5px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://www.yamaha-motor.co.id/uploads/content/2021012716374767982G99280.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| <CardBody> | |||||
| <h4 className={classes.cardTitle}>Awal Tahun 2021, Yamaha Fino 125 Sporty Tampil... </h4> | |||||
| <p>Jakarta – Melanjutkan penyegaran warna baru pada Yamaha Fino 125 Premium sebelumnya, kini saatnya...</p> | |||||
| <Button color="info">Read More</Button> | |||||
| </CardBody> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"5px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://www.yamaha-motor.co.id/uploads/content/2021011912521629671C71533.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| <CardBody> | |||||
| <h4 className={classes.cardTitle}>Ini Warna Baru Yamaha R15 !</h4> | |||||
| <p>Tahun 2021 baru bergulir, Yamaha sudah memanjakan konsumen dengan melansir warna teranyar...</p> | |||||
| <Button color="info">Read More</Button> | |||||
| </CardBody> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"5px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://www.yamaha-motor.co.id/uploads/content/202101141322331084Z7315.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| <CardBody> | |||||
| <h4 className={classes.cardTitle}>Awal Tahun 2021, MX King 150 Warna Baru Meluncur </h4> | |||||
| <p>Awal tahun 2021 ini dibuka Yamaha dengan merilis warna baru MX King 150 yang kian menonjolkan tampilan...</p> | |||||
| <Button color="info">Read More</Button> | |||||
| </CardBody> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| <Grid align="center" style={{padding:"5px"}}> | |||||
| <Paper className={classes.paper}> | |||||
| <Card style={{width: "20rem"}}> | |||||
| <img | |||||
| style={{height: "180px", width: "100%", display: "block"}} | |||||
| className={classes.imgCardTop} | |||||
| src="https://www.yamaha-motor.co.id/uploads/content/2020121515490320942H80353.jpg" | |||||
| alt="Card-img-cap" | |||||
| /> | |||||
| <CardBody> | |||||
| <h4 className={classes.cardTitle}>Semakin Sporty, Yamaha Luncurkan All New...</h4> | |||||
| <p>Jakarta – Sebagai wujud apresiasi terhadap pecinta MotoGP di Indonesia dan semangat sportifitas MotoGP...</p> | |||||
| <Button color="info">Read More</Button> | |||||
| </CardBody> | |||||
| </Card> | |||||
| </Paper> | |||||
| </Grid> | |||||
| </GridContainer> | |||||
| <div align="center"> | |||||
| <Paginations | |||||
| color="info" | |||||
| pages={[ | |||||
| { text: 1 }, | |||||
| { text: "..." }, | |||||
| { text: 5 }, | |||||
| { text: 6 }, | |||||
| { active: true, text: 7 }, | |||||
| { text: 8 }, | |||||
| { text: 9 }, | |||||
| { text: "..." }, | |||||
| { text: 12 } | |||||
| ]} | |||||
| /> | |||||
| </div> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| export default LatestNews; | |||||
| @@ -1,13 +1,8 @@ | |||||
| import React, { useState, useEffect } from 'react'; | |||||
| import Router, { withRouter } from 'next/router' | |||||
| import React from 'react'; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| import ReactPaginate from 'react-paginate'; | |||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Paper from '@material-ui/core/Paper'; | |||||
| import Grid from '@material-ui/core/Grid'; | import Grid from '@material-ui/core/Grid'; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
| @@ -19,29 +14,6 @@ import Icon from "@material-ui/core/Icon"; | |||||
| const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
| const DataLatestNews = function ({ backend, news, ...props }) { | const DataLatestNews = function ({ backend, news, ...props }) { | ||||
| const [isLoading, setLoading] = useState(false); //State for the loading indicator | |||||
| const startLoading = () => setLoading(true); | |||||
| const stopLoading = () => setLoading(false); | |||||
| useEffect(() => { //After the component is mounted set router event handlers | |||||
| Router.events.on('routeChangeStart', startLoading); | |||||
| Router.events.on('routeChangeComplete', stopLoading); | |||||
| return () => { | |||||
| Router.events.off('routeChangeStart', startLoading); | |||||
| Router.events.off('routeChangeComplete', stopLoading); | |||||
| } | |||||
| }, []) | |||||
| const pagginationHandler = (page) => { | |||||
| const currentPath = props.router.pathname; | |||||
| const currentQuery = props.router.query; | |||||
| currentQuery.page = page.selected + 1; | |||||
| props.router.push({ | |||||
| pathname: currentPath, | |||||
| query: currentQuery, | |||||
| }); | |||||
| }; | |||||
| const classes = useStyles(); | const classes = useStyles(); | ||||
| const latnews = news.map((data) => { | const latnews = news.map((data) => { | ||||
| return ( | return ( | ||||
| @@ -53,7 +25,6 @@ const DataLatestNews = function ({ backend, news, ...props }) { | |||||
| src={`${backend}${data.img[0]["url"]}`} | src={`${backend}${data.img[0]["url"]}`} | ||||
| /> | /> | ||||
| <CardBody> | <CardBody> | ||||
| {/* <h4 className={classes.cardTitle}>{data.title}</h4> */} | |||||
| <p>{data.title}</p> | <p>{data.title}</p> | ||||
| <Button color="info" round href={"/latestnews_details?s="+data.id}> | <Button color="info" round href={"/latestnews_details?s="+data.id}> | ||||
| <Icon className={classes.icons}>open_in_new</Icon>Read More | <Icon className={classes.icons}>open_in_new</Icon>Read More | ||||
| @@ -1,40 +1,12 @@ | |||||
| import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
| import Router, { withRouter } from 'next/router' | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| import ReactPaginate from 'react-paginate'; | |||||
| // component | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
| import Paginations from "components/Pagination/Pagination.js"; | |||||
| const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
| const DataLatestNews = function ({ backend, news, ...props }) { | const DataLatestNews = function ({ backend, news, ...props }) { | ||||
| const [isLoading, setLoading] = useState(false); //State for the loading indicator | |||||
| const startLoading = () => setLoading(true); | |||||
| const stopLoading = () => setLoading(false); | |||||
| useEffect(() => { //After the component is mounted set router event handlers | |||||
| Router.events.on('routeChangeStart', startLoading); | |||||
| Router.events.on('routeChangeComplete', stopLoading); | |||||
| return () => { | |||||
| Router.events.off('routeChangeStart', startLoading); | |||||
| Router.events.off('routeChangeComplete', stopLoading); | |||||
| } | |||||
| }, []) | |||||
| const pagginationHandler = (page) => { | |||||
| const currentPath = props.router.pathname; | |||||
| const currentQuery = props.router.query; | |||||
| currentQuery.page = page.selected + 1; | |||||
| props.router.push({ | |||||
| pathname: currentPath, | |||||
| query: currentQuery, | |||||
| }); | |||||
| }; | |||||
| const classes = useStyles(); | const classes = useStyles(); | ||||
| const latnews = news.map((data) => { | const latnews = news.map((data) => { | ||||
| return ( | return ( | ||||
| @@ -1,15 +1,9 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
| // Component | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
| import NavPills from "components/NavPills/NavPills.js"; | import NavPills from "components/NavPills/NavPills.js"; | ||||
| @@ -1,16 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
| import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | ||||
| // Component | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
| import Grid from '@material-ui/core/Grid'; | import Grid from '@material-ui/core/Grid'; | ||||
| import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
| @@ -1,20 +1,3 @@ | |||||
| /*! | |||||
| ========================================================= | |||||
| * NextJS Material Kit v1.1.0 based on Material Kit Free - v2.0.2 (Bootstrap 4.0.0 Final Edition) and Material Kit React v1.8.0 | |||||
| ========================================================= | |||||
| * Product Page: https://www.creative-tim.com/product/nextjs-material-kit | |||||
| * Copyright 2020 Creative Tim (https://www.creative-tim.com) | |||||
| * Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md) | |||||
| * Coded by Creative Tim | |||||
| ========================================================= | |||||
| * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | |||||
| */ | |||||
| import React from "react"; | import React from "react"; | ||||
| import ReactDOM from "react-dom"; | import ReactDOM from "react-dom"; | ||||
| import App from "next/app"; | import App from "next/app"; | ||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // react components for routing our app without refresh | |||||
| import Link from "next/link"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import SectionCarrer from "pages-sections/carrer/carrer.js"; | import SectionCarrer from "pages-sections/carrer/carrer.js"; | ||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -34,20 +27,7 @@ const Carrer = function ({ backend, s1, d3, sma, ...props }) { | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/carrer.png")} height="50px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/carrer.png")} height="50px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | ||||
| </div> | </div> | ||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // react components for routing our app without refresh | |||||
| import Link from "next/link"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import CarrerDetail from "pages-sections/carrer/carrer_details.js"; | import CarrerDetail from "pages-sections/carrer/carrer_details.js"; | ||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -34,20 +27,7 @@ const CarrerDetails = function ({ backend, detailcarrer, ...props }) { | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/carrer.png")} height="50px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/carrer.png")} height="50px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <CarrerDetail detailcarrer={detailcarrer} backend={backend}/> | <CarrerDetail detailcarrer={detailcarrer} backend={backend}/> | ||||
| </div> | </div> | ||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // react components for routing our app without refresh | |||||
| import Link from "next/link"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| // import SectionChart from "pages-sections/Components-Sections/SectionChart.js"; | // import SectionChart from "pages-sections/Components-Sections/SectionChart.js"; | ||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "../assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -33,20 +26,7 @@ export default function Components(props) { | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| {/* <SectionChart /> */} | {/* <SectionChart /> */} | ||||
| </div> | </div> | ||||
| @@ -1,25 +1,16 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // react components for routing our app without refresh | |||||
| import Link from "next/link"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| import Button from "components/CustomButtons/Button.js"; | |||||
| import GetbusinessPartners from "../api/home/businessPartner.js"; | import GetbusinessPartners from "../api/home/businessPartner.js"; | ||||
| import Getservices from "../api/home/service.js"; | import Getservices from "../api/home/service.js"; | ||||
| import Getcarousels from "../api/home/carousel.js"; | import Getcarousels from "../api/home/carousel.js"; | ||||
| import DataSnackbarContent from "../pages-sections/snackbar.js"; | import DataSnackbarContent from "../pages-sections/snackbar.js"; | ||||
| import DataCarousel from "../pages-sections/home/carousel.js"; | import DataCarousel from "../pages-sections/home/carousel.js"; | ||||
| import DataService from "../pages-sections/home/service.js"; | import DataService from "../pages-sections/home/service.js"; | ||||
| @@ -50,31 +41,7 @@ const Home = function ({ | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax | |||||
| image={require("assets/img/welcome.png")} | |||||
| styles={{ marginTop: "50px" }} | |||||
| > | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| {/* <GridItem> | |||||
| <div className={classes.brand} align="center"> | |||||
| <h1 className={classes.title}>Thamrin Group</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> | |||||
| <Button | |||||
| href="/login" | |||||
| className={classes.registerNavLink} | |||||
| color="info" | |||||
| box | |||||
| > | |||||
| Shop Now | |||||
| </Button> | |||||
| </GridItem> */} | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/welcome.png")}styles={{ marginTop: "50px" }}/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <DataSnackbarContent /> | <DataSnackbarContent /> | ||||
| <CoreValue /> | <CoreValue /> | ||||
| @@ -1,82 +0,0 @@ | |||||
| import React from "react"; | |||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| // @material-ui/icons | |||||
| // 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/nextjs-material-kit/pages/landingPage.js"; | |||||
| // Sections for this page | |||||
| // import ProductSection from "pages-sections/LandingPage-Sections/ProductSection.js"; | |||||
| // import TeamSection from "pages-sections/LandingPage-Sections/TeamSection.js"; | |||||
| // import WorkSection from "pages-sections/LandingPage-Sections/WorkSection.js"; | |||||
| const dashboardRoutes = []; | |||||
| const useStyles = makeStyles(styles); | |||||
| export default function LandingPage(props) { | |||||
| const classes = useStyles(); | |||||
| const { ...rest } = props; | |||||
| return ( | |||||
| <div> | |||||
| <Header | |||||
| color="transparent" | |||||
| routes={dashboardRoutes} | |||||
| brand="NextJS Material Kit" | |||||
| rightLinks={<HeaderLinks />} | |||||
| fixed | |||||
| changeColorOnScroll={{ | |||||
| height: 400, | |||||
| color: "white", | |||||
| }} | |||||
| {...rest} | |||||
| /> | |||||
| <Parallax filter responsive image={require("assets/img/landing-bg.jpg")}> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem xs={12} sm={12} md={6}> | |||||
| <h1 className={classes.title}>Your Story Starts With Us.</h1> | |||||
| <h4> | |||||
| Every landing page needs a small description after the big bold | |||||
| title, that{"'"}s why we added this text here. Add here all the | |||||
| information that can make you or your product create the first | |||||
| impression. | |||||
| </h4> | |||||
| <br /> | |||||
| <Button | |||||
| color="danger" | |||||
| size="lg" | |||||
| href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&ref=creativetim" | |||||
| target="_blank" | |||||
| rel="noopener noreferrer" | |||||
| > | |||||
| <i className="fas fa-play" /> | |||||
| Watch video | |||||
| </Button> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | |||||
| <div className={classes.container}> | |||||
| {/*<ProductSection /> | |||||
| <TeamSection /> | |||||
| <WorkSection />*/} | |||||
| </div> | |||||
| </div> | |||||
| <Footer /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -37,20 +30,7 @@ const LatestNews = function ({ backend, news, ...props }) { | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <DataSnackbarContent/> | <DataSnackbarContent/> | ||||
| <DataLatestNews news={news} backend={backend}/> | <DataLatestNews news={news} backend={backend}/> | ||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -37,20 +30,7 @@ const detailLatestNews = function ({ backend, news, ...props }) { | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <DataSnackbarContent/> | <DataSnackbarContent/> | ||||
| <DetailLatestNews news={news} backend={backend}/> | <DetailLatestNews news={news} backend={backend}/> | ||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // react components for routing our app without refresh | |||||
| import Link from "next/link"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import DataProduct from "pages-sections/product/product.js"; | import DataProduct from "pages-sections/product/product.js"; | ||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -46,20 +39,7 @@ const Product = function ({ | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <DataProduct | <DataProduct | ||||
| yamaha={yamaha} | yamaha={yamaha} | ||||
| @@ -1,17 +1,10 @@ | |||||
| import React from "react"; | import React from "react"; | ||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | import classNames from "classnames"; | ||||
| // react components for routing our app without refresh | |||||
| import Link from "next/link"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
| // @material-ui/icons | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
| import Footer from "components/Footer/Footer.js"; | import Footer from "components/Footer/Footer.js"; | ||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import ProductDetail from "pages-sections/product/product_details.js"; | import ProductDetail from "pages-sections/product/product_details.js"; | ||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -34,20 +27,7 @@ const ProductDetails = function ({ backend, detailproduct, ...props }) { | |||||
| }} | }} | ||||
| {...rest} | {...rest} | ||||
| /> | /> | ||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem> | |||||
| {/* <div className={classes.brand}> | |||||
| <h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
| <h3 className={classes.subtitle}> | |||||
| A Badass Material Kit based on Material-UI and NextJS. | |||||
| </h3> | |||||
| </div> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </Parallax> | |||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
| <ProductDetail detailproduct={detailproduct} backend={backend}/> | <ProductDetail detailproduct={detailproduct} backend={backend}/> | ||||
| </div> | </div> | ||||
| @@ -1,215 +0,0 @@ | |||||
| import React from "react"; | |||||
| // nodejs library that concatenates classes | |||||
| import classNames from "classnames"; | |||||
| // @material-ui/core components | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| // @material-ui/icons | |||||
| import Camera from "@material-ui/icons/Camera"; | |||||
| import Palette from "@material-ui/icons/Palette"; | |||||
| import Favorite from "@material-ui/icons/Favorite"; | |||||
| // core components | |||||
| import Header from "components/Header/Header.js"; | |||||
| import Footer from "components/Footer/Footer.js"; | |||||
| import Button from "components/CustomButtons/Button.js"; | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import HeaderLinks from "components/Header/HeaderLinks.js"; | |||||
| import NavPills from "components/NavPills/NavPills.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | |||||
| import profile from "assets/img/faces/christian.jpg"; | |||||
| import studio1 from "assets/img/examples/studio-1.jpg"; | |||||
| import studio2 from "assets/img/examples/studio-2.jpg"; | |||||
| import studio3 from "assets/img/examples/studio-3.jpg"; | |||||
| import studio4 from "assets/img/examples/studio-4.jpg"; | |||||
| import studio5 from "assets/img/examples/studio-5.jpg"; | |||||
| import work1 from "assets/img/examples/olu-eletu.jpg"; | |||||
| import work2 from "assets/img/examples/clem-onojeghuo.jpg"; | |||||
| import work3 from "assets/img/examples/cynthia-del-rio.jpg"; | |||||
| import work4 from "assets/img/examples/mariya-georgieva.jpg"; | |||||
| import work5 from "assets/img/examples/clem-onojegaw.jpg"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||||
| const useStyles = makeStyles(styles); | |||||
| export default function ProfilePage(props) { | |||||
| const classes = useStyles(); | |||||
| const { ...rest } = props; | |||||
| const imageClasses = classNames( | |||||
| classes.imgRaised, | |||||
| classes.imgRoundedCircle, | |||||
| classes.imgFluid | |||||
| ); | |||||
| const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
| return ( | |||||
| <div> | |||||
| <Header | |||||
| color="transparent" | |||||
| brand="NextJS Material Kit" | |||||
| rightLinks={<HeaderLinks />} | |||||
| fixed | |||||
| changeColorOnScroll={{ | |||||
| height: 200, | |||||
| color: "white" | |||||
| }} | |||||
| {...rest} | |||||
| /> | |||||
| <Parallax small filter image={require("assets/img/profile-bg.jpg")} /> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | |||||
| <div> | |||||
| <div className={classes.container}> | |||||
| <GridContainer justify="center"> | |||||
| <GridItem xs={12} sm={12} md={6}> | |||||
| <div className={classes.profile}> | |||||
| <div> | |||||
| <img src={profile} alt="..." className={imageClasses} /> | |||||
| </div> | |||||
| <div className={classes.name}> | |||||
| <h3 className={classes.title}>Christian Louboutin</h3> | |||||
| <h6>DESIGNER</h6> | |||||
| <Button justIcon link className={classes.margin5}> | |||||
| <i className={"fab fa-twitter"} /> | |||||
| </Button> | |||||
| <Button justIcon link className={classes.margin5}> | |||||
| <i className={"fab fa-instagram"} /> | |||||
| </Button> | |||||
| <Button justIcon link className={classes.margin5}> | |||||
| <i className={"fab fa-facebook"} /> | |||||
| </Button> | |||||
| </div> | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| <div className={classes.description}> | |||||
| <p> | |||||
| An artist of considerable range, Chet Faker — the name taken by | |||||
| Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs | |||||
| and records all of his own music, giving it a warm, intimate | |||||
| feel with a solid groove structure.{" "} | |||||
| </p> | |||||
| </div> | |||||
| <GridContainer justify="center"> | |||||
| <GridItem xs={12} sm={12} md={8} className={classes.navWrapper}> | |||||
| <NavPills | |||||
| alignCenter | |||||
| color="primary" | |||||
| tabs={[ | |||||
| { | |||||
| tabButton: "Studio", | |||||
| tabIcon: Camera, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center"> | |||||
| <GridItem xs={12} sm={12} md={4}> | |||||
| <img | |||||
| alt="..." | |||||
| src={studio1} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={studio2} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| </GridItem> | |||||
| <GridItem xs={12} sm={12} md={4}> | |||||
| <img | |||||
| alt="..." | |||||
| src={studio5} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={studio4} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ) | |||||
| }, | |||||
| { | |||||
| tabButton: "Work", | |||||
| tabIcon: Palette, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center"> | |||||
| <GridItem xs={12} sm={12} md={4}> | |||||
| <img | |||||
| alt="..." | |||||
| src={work1} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={work2} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={work3} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| </GridItem> | |||||
| <GridItem xs={12} sm={12} md={4}> | |||||
| <img | |||||
| alt="..." | |||||
| src={work4} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={work5} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ) | |||||
| }, | |||||
| { | |||||
| tabButton: "Favorite", | |||||
| tabIcon: Favorite, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center"> | |||||
| <GridItem xs={12} sm={12} md={4}> | |||||
| <img | |||||
| alt="..." | |||||
| src={work4} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={studio3} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| </GridItem> | |||||
| <GridItem xs={12} sm={12} md={4}> | |||||
| <img | |||||
| alt="..." | |||||
| src={work2} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={work1} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| <img | |||||
| alt="..." | |||||
| src={studio1} | |||||
| className={navImageClasses} | |||||
| /> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ) | |||||
| } | |||||
| ]} | |||||
| /> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <Footer /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||