Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 

388 wiersze
15 KiB

  1. import React from "react";
  2. import classNames from "classnames";
  3. import { makeStyles } from "@material-ui/core/styles";
  4. import GridContainer from "components/Grid/GridContainer.js";
  5. import GridItem from "components/Grid/GridItem.js";
  6. import NavPills from "components/NavPills/NavPills.js";
  7. import Card from "components/Card/Card.js";
  8. import CardBody from "components/Card/CardBody.js";
  9. import CardHeader from "components/Card/CardHeader.js";
  10. import Button from "components/CustomButtons/Button.js";
  11. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
  12. import Icon from "@material-ui/core/Icon";
  13. import { Motorcycle } from "@material-ui/icons";
  14. import NumberFormat from 'react-number-format';
  15. const useStyles = makeStyles(styles);
  16. const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, moped, monsterenergy, cbu, ...props }) {
  17. const classes = useStyles();
  18. const { ...rest } = props;
  19. const imageClasses = classNames(
  20. classes.imgRaised,
  21. classes.imgRoundedCircle,
  22. classes.imgFluid
  23. );
  24. const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
  25. const Productmaxi = maxi.map((data) => {
  26. return (
  27. <div style={{padding: "20px", marginTop:"-40px"}}>
  28. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  29. <CardBody>
  30. <div style={{padding:"10px"}}>
  31. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  32. />
  33. <div align="center">
  34. <h5><b>{data.name}</b></h5>
  35. <h5>
  36. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  37. </h5>
  38. <Button
  39. color="info" round
  40. href={"/yamaha/product/product_detail?s="+data.id}
  41. >
  42. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  43. </Button>
  44. <Button
  45. color="info" round
  46. href={"/yamaha/cart/checkout?s="+data.id}
  47. >
  48. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  49. </Button>
  50. </div>
  51. </div>
  52. </CardBody>
  53. </Card>
  54. </div>
  55. );
  56. })
  57. const Productmatic = matic.map((data) => {
  58. return (
  59. <div style={{padding: "20px", marginTop:"-40px"}}>
  60. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  61. <CardBody>
  62. <div style={{padding:"10px"}}>
  63. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  64. />
  65. <div align="center">
  66. <h5><b>{data.name}</b></h5>
  67. <h5>
  68. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  69. </h5>
  70. <Button
  71. color="info" round
  72. href={"/yamaha/product/product_detail?s="+data.id}
  73. >
  74. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  75. </Button>
  76. {/* <Button
  77. color="info" round
  78. href={"/yamaha/cart/checkout?s="+data.id}
  79. >
  80. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  81. </Button> */}
  82. </div>
  83. </div>
  84. </CardBody>
  85. </Card>
  86. </div>
  87. );
  88. })
  89. const Productnaked = naked.map((data) => {
  90. return (
  91. <div style={{padding: "20px", marginTop:"-40px"}}>
  92. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  93. <CardBody>
  94. <div style={{padding:"10px"}}>
  95. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  96. />
  97. <div align="center">
  98. <h5><b>{data.name}</b></h5>
  99. <h5>
  100. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  101. </h5>
  102. <Button
  103. color="info" round
  104. href={"/yamaha/product/product_detail?s="+data.id}
  105. >
  106. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  107. </Button>
  108. {/* <Button
  109. color="info" round
  110. href={"/yamaha/cart/checkout?s="+data.id}
  111. >
  112. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  113. </Button> */}
  114. </div>
  115. </div>
  116. </CardBody>
  117. </Card>
  118. </div>
  119. );
  120. })
  121. const Productsport = sport.map((data) => {
  122. return (
  123. <div style={{padding: "20px", marginTop:"-40px"}}>
  124. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  125. <CardBody>
  126. <div style={{padding:"10px"}}>
  127. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  128. />
  129. <div align="center">
  130. <h5><b>{data.name}</b></h5>
  131. <h5>
  132. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  133. </h5>
  134. <Button
  135. color="info" round
  136. href={"/yamaha/product/product_detail?s="+data.id}
  137. >
  138. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  139. </Button>
  140. {/* <Button
  141. color="info" round
  142. href={"/yamaha/cart/checkout?s="+data.id}
  143. >
  144. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  145. </Button> */}
  146. </div>
  147. </div>
  148. </CardBody>
  149. </Card>
  150. </div>
  151. );
  152. })
  153. const Productoffroad = offroad.map((data) => {
  154. return (
  155. <div style={{padding: "20px", marginTop:"-40px"}}>
  156. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  157. <CardBody>
  158. <div style={{padding:"10px"}}>
  159. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  160. />
  161. <div align="center">
  162. <h5><b>{data.name}</b></h5>
  163. <h5>
  164. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  165. </h5>
  166. <Button
  167. color="info" round
  168. href={"/yamaha/product/product_detail?s="+data.id}
  169. >
  170. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  171. </Button>
  172. {/* <Button
  173. color="info" round
  174. href={"/yamaha/cart/checkout?s="+data.id}
  175. >
  176. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  177. </Button> */}
  178. </div>
  179. </div>
  180. </CardBody>
  181. </Card>
  182. </div>
  183. );
  184. })
  185. const Productmoped = moped.map((data) => {
  186. return (
  187. <div style={{padding: "20px", marginTop:"-40px"}}>
  188. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  189. <CardBody>
  190. <div style={{padding:"10px"}}>
  191. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  192. />
  193. <div align="center">
  194. <h5><b>{data.name}</b></h5>
  195. <h5>
  196. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  197. </h5>
  198. <Button
  199. color="info" round
  200. href={"/yamaha/product/product_detail?s="+data.id}
  201. >
  202. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  203. </Button>
  204. {/* <Button
  205. color="info" round
  206. href={"/yamaha/cart/checkout?s="+data.id}
  207. >
  208. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  209. </Button> */}
  210. </div>
  211. </div>
  212. </CardBody>
  213. </Card>
  214. </div>
  215. );
  216. })
  217. const Productmonsterenergy = monsterenergy.map((data) => {
  218. return (
  219. <div style={{padding: "20px", marginTop:"-40px"}}>
  220. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  221. <CardBody>
  222. <div style={{padding:"10px"}}>
  223. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  224. />
  225. <div align="center">
  226. <h5><b>{data.name}</b></h5>
  227. <h5>
  228. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  229. </h5>
  230. <Button
  231. color="info" round
  232. href={"/yamaha/product/product_detail?s="+data.id}
  233. >
  234. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  235. </Button>
  236. {/* <Button
  237. color="info" round
  238. href={"/yamaha/cart/checkout?s="+data.id}
  239. >
  240. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  241. </Button> */}
  242. </div>
  243. </div>
  244. </CardBody>
  245. </Card>
  246. </div>
  247. );
  248. })
  249. const Productcbu = cbu.map((data) => {
  250. return (
  251. <div style={{padding: "20px", marginTop:"-40px"}}>
  252. <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
  253. <CardBody>
  254. <div style={{padding:"10px"}}>
  255. <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
  256. />
  257. <div align="center">
  258. <h5><b>{data.name}</b></h5>
  259. <h5>
  260. <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>
  261. </h5>
  262. <Button
  263. color="info" round
  264. href={"/yamaha/product/product_detail?s="+data.id}
  265. >
  266. <Icon className={classes.icons}>open_in_new</Icon>Detail Product
  267. </Button>
  268. {/* <Button
  269. color="info" round
  270. href={"/yamaha/cart/checkout?s="+data.id}
  271. >
  272. <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
  273. </Button> */}
  274. </div>
  275. </div>
  276. </CardBody>
  277. </Card>
  278. </div>
  279. );
  280. })
  281. return (
  282. <Card className={classes.textCenter}>
  283. <div align="center">
  284. <CardHeader color="info">Product</CardHeader>
  285. </div>
  286. <CardBody>
  287. <div align="center">
  288. <h2><b>Product & Facilities</b></h2>
  289. </div>
  290. <GridContainer justify="center">
  291. <GridItem>
  292. <NavPills
  293. alignCenter
  294. color="primary"
  295. tabs={[
  296. {
  297. tabButton: "Maxi",
  298. tabIcon: Motorcycle,
  299. tabContent: (
  300. <GridContainer justify="center">
  301. {Productmaxi}
  302. </GridContainer>
  303. ),
  304. },
  305. {
  306. tabButton: "Matic",
  307. tabIcon: Motorcycle,
  308. tabContent: (
  309. <GridContainer justify="center">
  310. {Productmatic}
  311. </GridContainer>
  312. ),
  313. },
  314. {
  315. tabButton: "Naked Bike",
  316. tabIcon: Motorcycle,
  317. tabContent: (
  318. <GridContainer justify="center">
  319. {Productnaked}
  320. </GridContainer>
  321. ),
  322. },
  323. {
  324. tabButton: "Sport",
  325. tabIcon: Motorcycle,
  326. tabContent: (
  327. <GridContainer justify="center">
  328. {Productsport}
  329. </GridContainer>
  330. ),
  331. },
  332. {
  333. tabButton: "Off Road",
  334. tabIcon: Motorcycle,
  335. tabContent: (
  336. <GridContainer justify="center">
  337. {Productoffroad}
  338. </GridContainer>
  339. ),
  340. },
  341. {
  342. tabButton: "Moped",
  343. tabIcon: Motorcycle,
  344. tabContent: (
  345. <GridContainer justify="center">
  346. {Productmoped}
  347. </GridContainer>
  348. ),
  349. },
  350. {
  351. tabButton: "Monster Energy MotoGP",
  352. tabIcon: Motorcycle,
  353. tabContent: (
  354. <GridContainer justify="center">
  355. {Productmonsterenergy}
  356. </GridContainer>
  357. ),
  358. },
  359. {
  360. tabButton: "CBU",
  361. tabIcon: Motorcycle,
  362. tabContent: (
  363. <GridContainer justify="center">
  364. {Productcbu}
  365. </GridContainer>
  366. ),
  367. },
  368. // {
  369. // tabButton: "ATV",
  370. // tabIcon: Motorcycle,
  371. // tabContent: (
  372. // <GridContainer justify="center">
  373. // {Productcbu}
  374. // </GridContainer>
  375. // ),
  376. // },
  377. ]}
  378. />
  379. </GridItem>
  380. </GridContainer>
  381. </CardBody>
  382. </Card>
  383. );
  384. }
  385. export default DataProduct;