yusmar
/
tbg-ecomm-nextjs
1
0
Atdalīts 0
Kods Problēmas 0 Izmaiņu pieprasījumi 0 Laidieni 0 Vikivietne Aktivitāte
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
87 Revīzijas
1 Atzars
204 MiB
 
 
Koks: 572b6a4179
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no '572b6a4179'
${ noResults }
tbg-ecomm-nextjs/pages-sections/yamaha/product/product.js

419 rindas
16 KiB
Neapstrādāts Vainot Vēsture 

  1. import React from "react";

  2. import classNames from "classnames";

  3. 

  4. import { makeStyles } from "@material-ui/core/styles";

  5. import GridContainer from "components/Grid/GridContainer.js";

  6. import GridItem from "components/Grid/GridItem.js";

  7. import NavPills from "components/NavPills/NavPills.js";

  8. import Card from "components/Card/Card.js";

  9. import CardBody from "components/Card/CardBody.js";

  10. import CardHeader from "components/Card/CardHeader.js";

  11. import Button from "components/CustomButtons/Button.js";

  12. import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";

  13. import Icon from "@material-ui/core/Icon";

  14. import { Motorcycle } from "@material-ui/icons";

  15. import NumberFormat from 'react-number-format';

  16. 

  17. const useStyles = makeStyles(styles);

  18. const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, moped, monsterenergy, cbu, product, ...props })  {

  19.     const classes = useStyles();

  20.     const { ...rest } = props;

  21.     const imageClasses = classNames(

  22.       classes.imgRaised,

  23.       classes.imgRoundedCircle,

  24.       classes.imgFluid

  25.     );

  26.     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);

  27.     const Product = product.map((data) => {

  28.       return (

  29.         <div style={{padding: "20px", marginTop:"-40px"}}>

  30.         <Card className={classes.textCenter} align="center" style={{width:"300px"}}>

  31.             <CardBody>

  32.             <div>

  33.                 <img style={{ width: "200px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  34.                 />

  35.                 <div align="center">

  36.                 <h5><b>{data.name}</b></h5>

  37.                 <Button

  38.                     color="info" round

  39.                     href={"/yamaha/product/product_detail?s="+data.id}

  40.                 >

  41.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  42.                 </Button>

  43.                 {/* <Button

  44.                     color="info" round

  45.                     href={"/yamaha/cart/checkout?s="+data.id}

  46.                 >

  47.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  48.                 </Button> */}

  49.                 </div>

  50.             </div>

  51.             </CardBody>

  52.         </Card>

  53.         </div>

  54.       );

  55.     })

  56.     const Productmaxi = maxi.map((data) => {

  57.       return (

  58.         <div style={{padding: "20px", marginTop:"-40px"}}>

  59.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  60.             <CardBody>

  61.             <div style={{padding:"10px"}}>

  62.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  63.                 />

  64.                 <div align="center">

  65.                 <h5><b>{data.name}</b></h5>

  66.                 <h5>

  67.                   <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  68.                 </h5>

  69.                 <Button

  70.                     color="info" round

  71.                     href={"/yamaha/product/product_detail?s="+data.id}

  72.                 >

  73.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  74.                 </Button>

  75.                 <Button

  76.                     color="info" round

  77.                     href={"/yamaha/cart/checkout?s="+data.id}

  78.                 >

  79.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  80.                 </Button>

  81.                 </div>

  82.             </div>

  83.             </CardBody>

  84.         </Card>

  85.         </div>

  86.       );

  87.     })

  88.     const Productmatic = matic.map((data) => {

  89.       return (

  90.         <div style={{padding: "20px", marginTop:"-40px"}}>

  91.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  92.             <CardBody>

  93.             <div style={{padding:"10px"}}>

  94.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  95.                 />

  96.                 <div align="center">

  97.                 <h5><b>{data.name}</b></h5>

  98.                 <h5>

  99.                   <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  100.                 </h5>

  101.                 <Button

  102.                     color="info" round

  103.                     href={"/yamaha/product/product_detail?s="+data.id}

  104.                 >

  105.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  106.                 </Button>

  107.                 {/* <Button

  108.                     color="info" round

  109.                     href={"/yamaha/cart/checkout?s="+data.id}

  110.                 >

  111.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  112.                 </Button> */}

  113.                 </div>

  114.             </div>

  115.             </CardBody>

  116.         </Card>

  117.         </div>

  118.       );

  119.     })

  120.     const Productnaked = naked.map((data) => {

  121.       return (

  122.         <div style={{padding: "20px", marginTop:"-40px"}}>

  123.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  124.             <CardBody>

  125.             <div style={{padding:"10px"}}>

  126.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  127.                 />

  128.                 <div align="center">

  129.                 <h5><b>{data.name}</b></h5>

  130.                 <h5>

  131.                   <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  132.                 </h5>

  133.                 <Button

  134.                     color="info" round

  135.                     href={"/yamaha/product/product_detail?s="+data.id}

  136.                 >

  137.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  138.                 </Button>

  139.                 {/* <Button

  140.                     color="info" round

  141.                     href={"/yamaha/cart/checkout?s="+data.id}

  142.                 >

  143.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  144.                 </Button> */}

  145.                 </div>

  146.             </div>

  147.             </CardBody>

  148.         </Card>

  149.         </div>

  150.       );

  151.     })

  152.     const Productsport = sport.map((data) => {

  153.       return (

  154.         <div style={{padding: "20px", marginTop:"-40px"}}>

  155.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  156.             <CardBody>

  157.             <div style={{padding:"10px"}}>

  158.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  159.                 />

  160.                 <div align="center">

  161.                 <h5><b>{data.name}</b></h5>

  162.                 <h5>

  163.                   <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  164.                 </h5>

  165.                 <Button

  166.                     color="info" round

  167.                     href={"/yamaha/product/product_detail?s="+data.id}

  168.                 >

  169.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  170.                 </Button>

  171.                 {/* <Button

  172.                     color="info" round

  173.                     href={"/yamaha/cart/checkout?s="+data.id}

  174.                 >

  175.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  176.                 </Button> */}

  177.                 </div>

  178.             </div>

  179.             </CardBody>

  180.         </Card>

  181.         </div>

  182.       );

  183.     })

  184.     const Productoffroad = offroad.map((data) => {

  185.       return (

  186.         <div style={{padding: "20px", marginTop:"-40px"}}>

  187.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  188.             <CardBody>

  189.             <div style={{padding:"10px"}}>

  190.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  191.                 />

  192.                 <div align="center">

  193.                 <h5><b>{data.name}</b></h5>

  194.                 <h5>

  195.                   <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  196.                 </h5>

  197.                 <Button

  198.                     color="info" round

  199.                     href={"/yamaha/product/product_detail?s="+data.id}

  200.                 >

  201.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  202.                 </Button>

  203.                 {/* <Button

  204.                     color="info" round

  205.                     href={"/yamaha/cart/checkout?s="+data.id}

  206.                 >

  207.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  208.                 </Button> */}

  209.                 </div>

  210.             </div>

  211.             </CardBody>

  212.         </Card>

  213.         </div>

  214.       );

  215.     })

  216.     const Productmoped = moped.map((data) => {

  217.       return (

  218.         <div style={{padding: "20px", marginTop:"-40px"}}>

  219.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  220.             <CardBody>

  221.             <div style={{padding:"10px"}}>

  222.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  223.                 />

  224.                 <div align="center">

  225.                 <h5><b>{data.name}</b></h5>

  226.                 <h5>

  227.                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  228.                 </h5>

  229.                 <Button

  230.                     color="info" round

  231.                     href={"/yamaha/product/product_detail?s="+data.id}

  232.                 >

  233.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  234.                 </Button>

  235.                 {/* <Button

  236.                     color="info" round

  237.                     href={"/yamaha/cart/checkout?s="+data.id}

  238.                 >

  239.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  240.                 </Button> */}

  241.                 </div>

  242.             </div>

  243.             </CardBody>

  244.         </Card>

  245.         </div>

  246.       );

  247.     })

  248.     const Productmonsterenergy = monsterenergy.map((data) => {

  249.       return (

  250.         <div style={{padding: "20px", marginTop:"-40px"}}>

  251.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  252.             <CardBody>

  253.             <div style={{padding:"10px"}}>

  254.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  255.                 />

  256.                 <div align="center">

  257.                 <h5><b>{data.name}</b></h5>

  258.                 <h5>

  259.                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  260.                 </h5>

  261.                 <Button

  262.                     color="info" round

  263.                     href={"/yamaha/product/product_detail?s="+data.id}

  264.                 >

  265.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  266.                 </Button>

  267.                 {/* <Button

  268.                     color="info" round

  269.                     href={"/yamaha/cart/checkout?s="+data.id}

  270.                 >

  271.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  272.                 </Button> */}

  273.                 </div>

  274.             </div>

  275.             </CardBody>

  276.         </Card>

  277.         </div>

  278.       );

  279.     })

  280.     const Productcbu = cbu.map((data) => {

  281.       return (

  282.         <div style={{padding: "20px", marginTop:"-40px"}}>

  283.         <Card className={classes.textCenter} align="center" style={{width:"350px"}}>

  284.             <CardBody>

  285.             <div style={{padding:"10px"}}>

  286.                 <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}

  287.                 />

  288.                 <div align="center">

  289.                 <h5><b>{data.name}</b></h5>

  290.                 <h5>

  291.                     <b><NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></b>

  292.                 </h5>

  293.                 <Button

  294.                     color="info" round

  295.                     href={"/yamaha/product/product_detail?s="+data.id}

  296.                 >

  297.                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product

  298.                 </Button>

  299.                 {/* <Button

  300.                     color="info" round

  301.                     href={"/yamaha/cart/checkout?s="+data.id}

  302.                 >

  303.                     <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart

  304.                 </Button> */}

  305.                 </div>

  306.             </div>

  307.             </CardBody>

  308.         </Card>

  309.         </div>

  310.       );

  311.     })

  312. 

  313.     return (

  314.     <Card className={classes.textCenter}>

  315.       <div align="center">

  316.         <CardHeader color="info">Product</CardHeader>

  317.       </div>

  318.       <CardBody>

  319.         <div align="center">

  320.           <h2><b>Product & Facilities</b></h2>

  321.         </div>

  322.           <GridContainer justify="center">

  323.             <GridItem>

  324.               <NavPills

  325.                 alignCenter

  326.                 color="primary"

  327.                 tabs={[

  328.                   {

  329.                     tabButton: "Motor Product",

  330.                     tabIcon: Motorcycle,

  331.                     tabContent: (

  332.                       <GridContainer justify="center">

  333.                         {Product}

  334.                       </GridContainer>

  335.                     ),

  336.                   },

  337.                   //{

  338.                   //   tabButton: "Matic",

  339.                   //   tabIcon: Motorcycle,

  340.                   //   tabContent: (

  341.                   //     <GridContainer justify="center">

  342.                   //       {Productmatic}

  343.                   //     </GridContainer>

  344.                   //   ),

  345.                   // },

  346.                   // {

  347.                   //   tabButton: "Naked Bike",

  348.                   //   tabIcon: Motorcycle,

  349.                   //   tabContent: (

  350.                   //     <GridContainer justify="center">

  351.                   //       {Productnaked}

  352.                   //     </GridContainer>

  353.                   //   ),

  354.                   // },

  355.                   // {

  356.                   //   tabButton: "Sport",

  357.                   //   tabIcon: Motorcycle,

  358.                   //   tabContent: (

  359.                   //     <GridContainer justify="center">

  360.                   //       {Productsport}

  361.                   //     </GridContainer>

  362.                   //   ),

  363.                   // },

  364.                   // {

  365.                   //   tabButton: "Off Road",

  366.                   //   tabIcon: Motorcycle,

  367.                   //   tabContent: (

  368.                   //     <GridContainer justify="center">

  369.                   //       {Productoffroad}

  370.                   //     </GridContainer>

  371.                   //   ),

  372.                   // },

  373.                   // {

  374.                   //   tabButton: "Moped",

  375.                   //   tabIcon: Motorcycle,

  376.                   //   tabContent: (

  377.                   //     <GridContainer justify="center">

  378.                   //       {Productmoped}

  379.                   //     </GridContainer>

  380.                   //   ),

  381.                   // },

  382.                   // {

  383.                   //   tabButton: "Monster Energy MotoGP",

  384.                   //   tabIcon: Motorcycle,

  385.                   //   tabContent: (

  386.                   //     <GridContainer justify="center">

  387.                   //       {Productmonsterenergy}

  388.                   //     </GridContainer>

  389.                   //   ),

  390.                   // },

  391.                   // {

  392.                   //   tabButton: "CBU",

  393.                   //   tabIcon: Motorcycle,

  394.                   //   tabContent: (

  395.                   //     <GridContainer justify="center">

  396.                   //       {Productcbu}

  397.                   //     </GridContainer>

  398.                   //   ),

  399.                   // },

  400.                   // {

  401.                   //   tabButton: "ATV",

  402.                   //   tabIcon: Motorcycle,

  403.                   //   tabContent: (

  404.                   //     <GridContainer justify="center">

  405.                   //       {Productcbu}

  406.                   //     </GridContainer>

  407.                   //   ),

  408.                   // },

  409.                 ]}

  410.               />

  411.             </GridItem>

  412.           </GridContainer>

  413.       </CardBody>

  414.     </Card>

  415.     );

  416. }

  417. 

  418. export default DataProduct;