@@ -24,6 +24,30 @@ async function GetNews(token="", start = 0) { | |||||
return res; | return res; | ||||
} | } | ||||
async function GetOtherNews(token="", start = 0) { | |||||
var res = await apollo.query( | |||||
` | |||||
query($start: Int!) { | |||||
latestNews(limit:3,start:$start) | |||||
{ | |||||
id | |||||
title | |||||
description | |||||
img{ | |||||
url | |||||
} | |||||
published_at | |||||
} | |||||
} | |||||
`, | |||||
token, | |||||
{ | |||||
start: start, | |||||
} | |||||
); | |||||
return res; | |||||
} | |||||
async function GetDetailNews(id, token="") { | async function GetDetailNews(id, token="") { | ||||
var res = await apollo.query( | var res = await apollo.query( | ||||
` | ` | ||||
@@ -51,4 +75,5 @@ async function GetDetailNews(id, token="") { | |||||
module.exports = { | module.exports = { | ||||
GetNews: GetNews, | GetNews: GetNews, | ||||
GetDetailNews: GetDetailNews, | GetDetailNews: GetDetailNews, | ||||
GetOtherNews:GetOtherNews, | |||||
}; | }; |
@@ -0,0 +1,182 @@ | |||||
import apollo from "../../lib/apollo.js"; | |||||
async function GetApparel(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "RConcept" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparel46Asia(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "Asia" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparelBasic(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "Basic" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparelMerchandise(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "Merchandise" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparelMaxi(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "Maxi" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparelRainSuit(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "RainSuit" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparelMotoGP(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "motoGP" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetApparelOffRoad(filter, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query { | |||||
apparels(where: { category: "OffRoad" ${(filter!="")?`name: "${filter}"`:""}}) { | |||||
id | |||||
name | |||||
price | |||||
img { | |||||
url | |||||
} | |||||
} | |||||
}`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
async function GetDetailApparel(id, token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query($input: ID!){ | |||||
apparels(where:{id:$input}) | |||||
{ | |||||
id | |||||
name | |||||
description | |||||
price | |||||
part_code | |||||
img { | |||||
url | |||||
} | |||||
stock | |||||
} | |||||
} `, | |||||
token, | |||||
{ | |||||
"input": id | |||||
} | |||||
); | |||||
return res; | |||||
} | |||||
module.exports = { | |||||
GetApparel:GetApparel, | |||||
GetApparel46Asia:GetApparel46Asia, | |||||
GetApparelBasic:GetApparelBasic, | |||||
GetApparelMerchandise:GetApparelMerchandise, | |||||
GetApparelMaxi:GetApparelMaxi, | |||||
GetApparelRainSuit:GetApparelRainSuit, | |||||
GetApparelMotoGP:GetApparelMotoGP, | |||||
GetApparelOffRoad:GetApparelOffRoad, | |||||
GetDetailApparel:GetDetailApparel, | |||||
}; |
@@ -1,24 +1,62 @@ | |||||
import React from 'react'; | import React from 'react'; | ||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
import ReactHtmlParser from "react-html-parser"; | import ReactHtmlParser from "react-html-parser"; | ||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
import classNames from "classnames"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.js"; | |||||
import CardHeader from "components/Card/CardHeader.js"; | |||||
import Carousel from "react-slick"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
const useStyles = makeStyles(styles); | |||||
const DataCarrer = function ({ backend, detailcarrer, ...props }) { | const DataCarrer = function ({ backend, detailcarrer, ...props }) { | ||||
const classes = useStyles(); | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const settings = { | |||||
dots: true, | |||||
infinite: true, | |||||
speed: 500, | |||||
slidesToShow: 1, | |||||
slidesToScroll: 1, | |||||
autoplay: true, | |||||
time: 5 | |||||
}; | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
const carrer = detailcarrer.map((data) => { | const carrer = detailcarrer.map((data) => { | ||||
return ( | return ( | ||||
<Card> | |||||
<CardHeader color="info"><h3><div align="center">{data.name}</div></h3></CardHeader> | |||||
<CardBody> | |||||
<div align="center"> | |||||
<img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" /> | |||||
</div> | |||||
<h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | |||||
<h5 align="justify">{ReactHtmlParser(data.description)}</h5> | |||||
</CardBody> | |||||
</Card> | |||||
<GridContainer justify="center"> | |||||
<Grid fluid xs={4}> | |||||
<div className={classes.section} id="notifications"> | |||||
<div className={classes.section}> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem className={classes.marginAuto}> | |||||
<Card carousel> | |||||
<Carousel {...settings}> | |||||
<img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||||
</Carousel> | |||||
</Card> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</Grid> | |||||
<Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}> | |||||
<h4>{data.name}</h4> | |||||
<h4>{data.published_at}</h4> | |||||
<hr></hr> | |||||
<div align="justify"> | |||||
<p>{ReactHtmlParser(data.description)}</p> | |||||
</div> | |||||
</Grid> | |||||
</GridContainer> | |||||
); | ); | ||||
}) | }) | ||||
return ( | return ( | ||||
@@ -19,7 +19,7 @@ const DataDealer = function ({ selected, handleName, backend, dealers, ...props | |||||
const Dealers = dealers.map((data) => { | const Dealers = dealers.map((data) => { | ||||
return ( | return ( | ||||
<div> | <div> | ||||
<Grid style={{width:"400px", padding:"30px"}}> | |||||
<Grid style={{width:"350px", padding:"10px"}}> | |||||
<Card> | <Card> | ||||
<CardHeader color="danger"><div align="center">{data.name}</div></CardHeader> | <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader> | ||||
<CardBody> | <CardBody> | ||||
@@ -59,8 +59,7 @@ const DataDealer = function ({ selected, handleName, backend, dealers, ...props | |||||
onChange={values => handleName(values)} | onChange={values => handleName(values)} | ||||
/> | /> | ||||
<br></br> | <br></br> | ||||
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
{Dealers} | |||||
<GridContainer justify="center"> | |||||
{Dealers} | {Dealers} | ||||
</GridContainer> | </GridContainer> | ||||
</div> | </div> | ||||
@@ -1,62 +1,93 @@ | |||||
import React, { useState, useEffect } from "react"; | import React, { useState, useEffect } from "react"; | ||||
import Router, { withRouter } from "next/router"; | |||||
import ReactHtmlParser from "react-html-parser"; | import ReactHtmlParser from "react-html-parser"; | ||||
// @material-ui/core components | // @material-ui/core components | ||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
import ReactPaginate from "react-paginate"; | import ReactPaginate from "react-paginate"; | ||||
import classNames from "classnames"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import Card from "components/Card/Card.js"; | |||||
import Carousel from "react-slick"; | |||||
import CardBody from "components/Card/CardBody.js"; | |||||
import Button from "components/CustomButtons/Button.js"; | |||||
import Icon from "@material-ui/core/Icon"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | ||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
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 DataLatestNews = function ({ backend, news, othernews,...props }) { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const settings = { | |||||
dots: true, | |||||
infinite: true, | |||||
speed: 500, | |||||
slidesToShow: 1, | |||||
slidesToScroll: 1, | |||||
autoplay: true, | |||||
time: 5 | |||||
}; | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
const otherlatnews = othernews.map((data) => { | |||||
return ( | |||||
<Grid align="center" style={{padding:"5px", marginTop:"-50px"}}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src={`${backend}${data.img[0]["url"]}`} | |||||
/> | |||||
<CardBody> | |||||
<p>{data.title}</p> | |||||
<Button color="info" round href={"/latestnews_details?s="+data.id}> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Read More | |||||
</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Grid> | |||||
); | |||||
}) | |||||
const latnews = news.map((data) => { | const latnews = news.map((data) => { | ||||
return ( | return ( | ||||
<div className={classes.section} style={{ padding: "40px" }}> | |||||
<div align="center" style={{ marginTop: "-40px" }}> | |||||
<h2>{data.title}</h2> | |||||
</div> | |||||
<br></br> | |||||
<br></br> | |||||
<div align="center"> | |||||
<img | |||||
src={`${backend}${data.img[0]["url"]}`} | |||||
alt="First slide" | |||||
className="slick-image" | |||||
/> | |||||
<div> | |||||
<br></br> | |||||
{data.published_at} | |||||
<GridContainer justify="center"> | |||||
<Grid fluid xs={4}> | |||||
<div className={classes.section} id="notifications"> | |||||
<div className={classes.section}> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem className={classes.marginAuto}> | |||||
<Card carousel> | |||||
<Carousel {...settings}> | |||||
<img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||||
</Carousel> | |||||
</Card> | |||||
<hr></hr> | |||||
<div align="center"> | |||||
<h3>Other Latest News</h3> | |||||
<h3>{otherlatnews}</h3> | |||||
</div> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</Grid> | |||||
<Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}> | |||||
<h4>{data.title}</h4> | |||||
<h4>{data.published_at}</h4> | |||||
<hr></hr> | |||||
<div align="justify"> | |||||
<p>{ReactHtmlParser(data.description)}</p> | |||||
</div> | </div> | ||||
</div> | |||||
<br></br> | |||||
<h5 align="justify">{ReactHtmlParser(data.description)}</h5> | |||||
</div> | |||||
</Grid> | |||||
</GridContainer> | |||||
); | ); | ||||
}); | }); | ||||
return <div>{latnews}</div>; | return <div>{latnews}</div>; | ||||
@@ -9,10 +9,11 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti | |||||
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 GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
const DataApparel = function ({ selected, handleName, backend, apparel, ...props }) { | |||||
const DataApparel = function ({ selected, handleName, backend, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, ...props }) { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | const { ...rest } = props; | ||||
const imageClasses = classNames( | const imageClasses = classNames( | ||||
@@ -21,18 +22,49 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props | |||||
classes.imgFluid | classes.imgFluid | ||||
); | ); | ||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | ||||
const ProductApparel = apparel.map((data) => { | |||||
return ( | |||||
<div style={{padding:"40px"}}> | |||||
const ProductApparelRCon = apparel.map((data) => { | |||||
return ( | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/apparel_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | |||||
); | |||||
}) | |||||
const ProductApparelAsia = asia.map((data) => { | |||||
return ( | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img | <img | ||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | /> | ||||
<div align="center"> | <div align="center"> | ||||
<h3>{data.name}</h3> | |||||
<h4>Rp.{data.price}</h4> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | <Button | ||||
color="info" round | color="info" round | ||||
href={"/product/apparel_details?s="+data.id} | href={"/product/apparel_details?s="+data.id} | ||||
@@ -41,13 +73,16 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props | |||||
</Button> | </Button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | |||||
); | ); | ||||
}) | }) | ||||
return ( | return ( | ||||
<div> | <div> | ||||
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}> | |||||
<Card className={classes.textCenter} align="center"> | |||||
<CardBody> | <CardBody> | ||||
<div align="center" style={{marginTop:"-50px"}}> | |||||
<div align="center"> | |||||
<h2>Yamaha Apparel</h2> | <h2>Yamaha Apparel</h2> | ||||
<Select | <Select | ||||
value={(selected)?apparel.filter((i)=>i.id==selected):null} | value={(selected)?apparel.filter((i)=>i.id==selected):null} | ||||
@@ -59,11 +94,35 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props | |||||
placeholder="filter by Nama Part" | placeholder="filter by Nama Part" | ||||
onChange={values => handleName(values)} | onChange={values => handleName(values)} | ||||
/> | /> | ||||
<br></br> | |||||
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
{ProductApparel}{ProductApparel} | |||||
</div><br></br><br></br><br></br> | |||||
<div align="center"> | |||||
<div align="center" className={classes.section} id="notifications"> | |||||
<SnackbarContent | |||||
message={ | |||||
<h4>APPAREL R CONCEPT</h4> | |||||
} | |||||
align="center" | |||||
color="danger" | |||||
/> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
{ProductApparelRCon} | |||||
</GridContainer> | |||||
</div><br></br><br></br> | |||||
<div align="center"> | |||||
<div align="center" className={classes.section} id="notifications"> | |||||
<SnackbarContent | |||||
message={ | |||||
<h4>APPAREL 46ASIA</h4> | |||||
} | |||||
align="center" | |||||
color="danger" | |||||
/> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
{ProductApparelAsia} | |||||
</GridContainer> | </GridContainer> | ||||
</div> | |||||
</div><br></br><br></br> | |||||
</CardBody> | </CardBody> | ||||
</Card> | </Card> | ||||
</div> | </div> | ||||
@@ -64,21 +64,10 @@ const DetailDataApparel = function ({ backend, detailapparel, ...props }) { | |||||
<hr></hr> | <hr></hr> | ||||
<ul> | <ul> | ||||
<li><h4>Stock : {data.stock}</h4></li> | <li><h4>Stock : {data.stock}</h4></li> | ||||
<li><h4>Part Code : {data.part_code}</h4></li> | |||||
<li><h4>Part Code : {ReactHtmlParser(data.part_code)}</h4></li> | |||||
</ul> | </ul> | ||||
</Grid> | </Grid> | ||||
</GridContainer> | </GridContainer> | ||||
<GridContainer> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||||
<img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/> | |||||
</Grid> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||||
<img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/> | |||||
</Grid> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||||
<img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/> | |||||
</Grid> | |||||
</GridContainer> | |||||
<div align="center"> | <div align="center"> | ||||
<hr></hr> | <hr></hr> | ||||
<h2>Deskripsi</h2> | <h2>Deskripsi</h2> | ||||
@@ -25,177 +25,193 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | ||||
const ProductHelmetRConcepts = helmet.map((data) => { | const ProductHelmetRConcepts = helmet.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetMTX = mtx.map((data) => { | const ProductHelmetMTX = mtx.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetExtreme = extreme.map((data) => { | const ProductHelmetExtreme = extreme.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetRanger = ranger.map((data) => { | const ProductHelmetRanger = ranger.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetFighter = fighter.map((data) => { | const ProductHelmetFighter = fighter.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetSwirl = swirl.map((data) => { | const ProductHelmetSwirl = swirl.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetClassic = classic.map((data) => { | const ProductHelmetClassic = classic.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", height:"200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const ProductHelmetUno = uno.map((data) => { | const ProductHelmetUno = uno.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/helmet_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
@@ -28,145 +28,193 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | ||||
const Productmaxi = maxi.map((data) => { | const Productmaxi = maxi.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productmatic = matic.map((data) => { | const Productmatic = matic.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productnaked = naked.map((data) => { | const Productnaked = naked.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productsport = sport.map((data) => { | const Productsport = sport.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productoffroad = offroad.map((data) => { | const Productoffroad = offroad.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productmoped = moped.map((data) => { | const Productmoped = moped.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productmonsterenergy = monsterenergy.map((data) => { | const Productmonsterenergy = monsterenergy.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
const Productcbu = cbu.map((data) => { | const Productcbu = cbu.map((data) => { | ||||
return ( | return ( | ||||
<div> | |||||
<div align="center" style={{padding:"30px"}}> | |||||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||||
<CardBody> | |||||
<div style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/product_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
@@ -24,23 +24,25 @@ const DataYamalube = function ({ selected, handleName, backend, yamalube, ...pro | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | ||||
const ProductYamalube = yamalube.map((data) => { | const ProductYamalube = yamalube.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"40px"}}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/yamalube_details?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px", height:"350px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "150px", height:"150px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/yamalube_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | </div> | ||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
@@ -24,18 +24,25 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) { | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | ||||
const ProductYGP = ygp.map((data) => { | const ProductYGP = ygp.map((data) => { | ||||
return ( | return ( | ||||
<div style={{padding:"50px"}} align="center"> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "150px", width:"250px", display: "block" }} | |||||
src={`${backend}${data.img["url"]}`} | |||||
className={navImageClasses} | |||||
/> | |||||
<h4>{data.name}</h4> | |||||
<h4>Rp.{data.price}</h4> | |||||
<Button color="info" round href={"/product/ygp_details?s="+data.id}> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||||
<CardBody> | |||||
<div align="center" style={{padding:"10px"}}> | |||||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h5>{data.name}</h5> | |||||
<h5>Rp.{data.price}</h5> | |||||
<Button | |||||
color="info" round | |||||
href={"/product/ygp_detail?s="+data.id} | |||||
> | |||||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||||
</Button> | |||||
</div> | |||||
</div> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | </div> | ||||
); | ); | ||||
}) | }) | ||||
@@ -14,7 +14,7 @@ import DetailLatestNews from "../pages-sections/latest_news/news_details.js"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
const detailLatestNews = function ({ backend, news, ...props }) { | |||||
const detailLatestNews = function ({ backend, news, othernews, ...props }) { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | const { ...rest } = props; | ||||
<DetailLatestNews news={props.news}/> | <DetailLatestNews news={props.news}/> | ||||
@@ -33,7 +33,7 @@ const detailLatestNews = function ({ backend, news, ...props }) { | |||||
<Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/> | <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} othernews={othernews} backend={backend}/> | |||||
</div> | </div> | ||||
<Footer /> | <Footer /> | ||||
</div> | </div> | ||||
@@ -45,12 +45,19 @@ export default detailLatestNews; | |||||
export async function getServerSideProps(context) { | export async function getServerSideProps(context) { | ||||
var {query} = context; | var {query} = context; | ||||
var news = []; | var news = []; | ||||
var othernews = []; | |||||
const backend = process.env.BACKEND_SERVER_URI; | const backend = process.env.BACKEND_SERVER_URI; | ||||
var res = await GetLatestNews.GetDetailNews(query.s||0); | var res = await GetLatestNews.GetDetailNews(query.s||0); | ||||
if (res["STATUS"] === 1) { | if (res["STATUS"] === 1) { | ||||
news = res["DATA"]["latestNews"]; | news = res["DATA"]["latestNews"]; | ||||
} | } | ||||
var res = await GetLatestNews.GetOtherNews(); | |||||
if (res["STATUS"] === 1) { | |||||
othernews = res["DATA"]["latestNews"]; | |||||
} | |||||
return { | return { | ||||
props: { news, backend }, // will be passed to the page component as props | |||||
props: { othernews, news, backend }, // will be passed to the page component as props | |||||
}; | }; | ||||
} | } |
@@ -9,7 +9,7 @@ import Footer from "components/Footer/Footer.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 GetDataApparel from "../../api/product/accessories.js"; | |||||
import GetDataApparel from "../../api/product/apparel.js"; | |||||
import DataApparel from "../../pages-sections/product/apparel.js"; | import DataApparel from "../../pages-sections/product/apparel.js"; | ||||
import DataSnackbarContent from "../../pages-sections/snackbar.js"; | import DataSnackbarContent from "../../pages-sections/snackbar.js"; | ||||
import Router from 'next/router' | import Router from 'next/router' | ||||
@@ -22,7 +22,7 @@ const handleName = values => { | |||||
query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, | query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, | ||||
}) | }) | ||||
} | } | ||||
const Apparel = function ({ selected, apparel, backend, ...props }) { | |||||
const Apparel = function ({ selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend, ...props }) { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | const { ...rest } = props; | ||||
return ( | return ( | ||||
@@ -41,7 +41,7 @@ const Apparel = function ({ selected, apparel, backend, ...props }) { | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<QueryClientProvider client={queryClient}> | <QueryClientProvider client={queryClient}> | ||||
<DataSnackbarContent/> | <DataSnackbarContent/> | ||||
<DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} backend={backend} /> | |||||
<DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} asia={asia} basic={basic} merchand={merchand} maxi={maxi} rainsuit={rainsuit} motogp={motogp} offroad={offroad} backend={backend} /> | |||||
</QueryClientProvider> | </QueryClientProvider> | ||||
</div> | </div> | ||||
<Footer /> | <Footer /> | ||||
@@ -53,21 +53,83 @@ export default Apparel; | |||||
export async function getServerSideProps(context) { | export async function getServerSideProps(context) { | ||||
var apparel = []; | var apparel = []; | ||||
var asia = []; | |||||
var basic = []; | |||||
var merchand = []; | |||||
var maxi = []; | |||||
var rainsuit = []; | |||||
var motogp = []; | |||||
var offroad = []; | |||||
var filter = context.query.filter||""; | var filter = context.query.filter||""; | ||||
var selected = ""; | var selected = ""; | ||||
const backend = process.env.BACKEND_SERVER_URI; | const backend = process.env.BACKEND_SERVER_URI; | ||||
var res = await GetDataApparel.GetApparel(filter); | var res = await GetDataApparel.GetApparel(filter); | ||||
if (res["STATUS"] === 1) { | if (res["STATUS"] === 1) { | ||||
apparel = res["DATA"]["accessories"]; | |||||
apparel = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | if (filter !=""){ | ||||
selected = apparel.filter((i)=>i.name==filter); | selected = apparel.filter((i)=>i.name==filter); | ||||
} | } | ||||
} | } | ||||
var res = await GetDataApparel.GetApparel46Asia(filter); | |||||
if (res["STATUS"] === 1) { | |||||
asia = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = asia.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
var res = await GetDataApparel.GetApparelBasic(filter); | |||||
if (res["STATUS"] === 1) { | |||||
basic = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = basic.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
var res = await GetDataApparel.GetApparelMerchandise(filter); | |||||
if (res["STATUS"] === 1) { | |||||
merchand = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = merchand.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
var res = await GetDataApparel.GetApparelMaxi(filter); | |||||
if (res["STATUS"] === 1) { | |||||
maxi = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = maxi.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
var res = await GetDataApparel.GetApparelRainSuit(filter); | |||||
if (res["STATUS"] === 1) { | |||||
rainsuit = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = rainsuit.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
var res = await GetDataApparel.GetApparelMotoGP(filter); | |||||
if (res["STATUS"] === 1) { | |||||
motogp = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = motogp.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
var res = await GetDataApparel.GetApparelOffRoad(filter); | |||||
if (res["STATUS"] === 1) { | |||||
offroad = res["DATA"]["apparels"]; | |||||
if (filter !=""){ | |||||
selected = offroad.filter((i)=>i.name==filter); | |||||
} | |||||
} | |||||
return { | return { | ||||
props: { selected, apparel, backend }, // will be passed to the page component as props | |||||
props: { selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend }, // will be passed to the page component as props | |||||
}; | }; | ||||
} | } |
@@ -8,7 +8,7 @@ import Footer from "components/Footer/Footer.js"; | |||||
import ApparelDetail from "pages-sections/product/apparel_details.js"; | import ApparelDetail from "pages-sections/product/apparel_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"; | ||||
import GetDetailApparel from "../../api/product/accessories.js" | |||||
import GetDetailApparel from "../../api/product/apparel.js" | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
@@ -43,11 +43,10 @@ export async function getServerSideProps(context) { | |||||
var detailapparel = []; | var detailapparel = []; | ||||
const backend = process.env.BACKEND_SERVER_URI; | const backend = process.env.BACKEND_SERVER_URI; | ||||
var res = await GetDetailApparel.GetDetailAccessories(query.s||0); | |||||
var res = await GetDetailApparel.GetDetailApparel(query.s||0); | |||||
if (res["STATUS"] === 1) { | if (res["STATUS"] === 1) { | ||||
detailapparel = res["DATA"]["accessories"]; | |||||
detailapparel = res["DATA"]["apparels"]; | |||||
} | } | ||||
console.log(detailapparel); | |||||
return { | return { | ||||
props: { detailapparel, backend }, // will be passed to the page component as props | props: { detailapparel, backend }, // will be passed to the page component as props | ||||