update dashboard
This commit is contained in:
parent
75e7d19339
commit
fe19410495
BIN
public/assets/images/emptyState/coupon.png
Normal file
BIN
public/assets/images/emptyState/coupon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/assets/images/login/background.jpg
Normal file
BIN
public/assets/images/login/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
public/assets/images/logo-bankbtn.png
Normal file
BIN
public/assets/images/logo-bankbtn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
104
src/common/pages/Dashboard/NewItemCard.js
Normal file
104
src/common/pages/Dashboard/NewItemCard.js
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import React, { Component } from "react";
|
||||
import Slider from "react-slick";
|
||||
|
||||
export default class PopularItemCardComponent extends Component {
|
||||
render() {
|
||||
const settings = {
|
||||
dots: true,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 4,
|
||||
initialSlide: 0,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
infinite: true,
|
||||
dots: true
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
initialSlide: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const data = [
|
||||
{
|
||||
image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAAggAAABoABFM3nAAEXbA.jpg.webp",
|
||||
name:"Sharetea - Avocado Cocoa Rocksalt & Cheese Large Size",
|
||||
price:"21.000"
|
||||
},
|
||||
{
|
||||
image:"https://img14.jd.id/Indonesia/s202x202_/nHBfsgAAIQAAAAMADA5mOgAEk8c.png.webp",
|
||||
name:"Tiket Masuk Ocean Dream Samudra - Annual Pass",
|
||||
price:"170.000"
|
||||
},
|
||||
{
|
||||
image:"https://img11.jd.id/Indonesia/s202x202_/nHBfsgAAuAAAAAkAA3z7VgAHUxo.jpg.webp",
|
||||
name:"Sharetea - Avocado Cocoa Rocksalt & Cheese Large Size",
|
||||
price:"90.000"
|
||||
},
|
||||
{
|
||||
image:"https://img20.jd.id/Indonesia/s202x202_/nHBfsgAAFgAAABwACxRf5gACNwE.jpg.webp",
|
||||
name:"YOSHINOYA - Value Voucher Rp 100.000",
|
||||
price:"90.000"
|
||||
},
|
||||
{
|
||||
image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAATwAAABUABZrMEQAFL3g.jpg.webp",
|
||||
name:"Fitness One - Membership 1 Bulan (Value Rp 625.000)",
|
||||
price:"21.000"
|
||||
},
|
||||
{
|
||||
image:"https://img10.jd.id/Indonesia/s202x202_/nHBfsgAAEQAAAAYABowcXAACSis.png.webp",
|
||||
name:"Tiket Dunia Fantasi Ancol - Annual Pass (Bebas Main 1 Tahun)",
|
||||
price:"325.000"
|
||||
},
|
||||
{
|
||||
image:"https://img12.jd.id/Indonesia/s202x202_/nHBfsgAAtAAAAAYAAhB8RwAFsSU.png.webp",
|
||||
name:"Waterbom PIK - All Day Pass Ticket",
|
||||
price:"88.000"
|
||||
},
|
||||
{
|
||||
image:"https://img11.jd.id/Indonesia/s202x202_/nHBfsgAA0wAAAAsAAgIg7AADiWM.jpg.webp",
|
||||
name:"Kompas - Digital Premium 12 bulan",
|
||||
price:"339.000"
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<Slider {...settings}>
|
||||
{
|
||||
data.map(it=>{
|
||||
return(
|
||||
<div>
|
||||
<div style={{textAlign:'center',padding:10}}>
|
||||
<img src={it.image} style={{marginLeft:'auto',marginRight:'auto'}} height={'180vh'} width={'100%'} />
|
||||
{it.name}
|
||||
<br/>
|
||||
<span style={{color:'#0061a7'}}>Rp. {it.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Slider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { Component } from "react";
|
||||
import Slider from "react-slick";
|
||||
|
||||
export default class Responsive extends Component {
|
||||
export default class PopularItemCardComponent extends Component {
|
||||
render() {
|
||||
var settings = {
|
||||
const settings = {
|
||||
dots: true,
|
||||
infinite: false,
|
||||
speed: 500,
|
||||
|
|
@ -37,34 +37,66 @@ export default class Responsive extends Component {
|
|||
}
|
||||
]
|
||||
};
|
||||
|
||||
const data = [
|
||||
{
|
||||
image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAAggAAABoABFM3nAAEXbA.jpg.webp",
|
||||
name:"Sharetea - Avocado Cocoa Rocksalt & Cheese Large Size",
|
||||
price:"21.000"
|
||||
},
|
||||
{
|
||||
image:"https://img14.jd.id/Indonesia/s202x202_/nHBfsgAAIQAAAAMADA5mOgAEk8c.png.webp",
|
||||
name:"Tiket Masuk Ocean Dream Samudra - Annual Pass",
|
||||
price:"170.000"
|
||||
},
|
||||
{
|
||||
image:"https://img11.jd.id/Indonesia/s202x202_/nHBfsgAAuAAAAAkAA3z7VgAHUxo.jpg.webp",
|
||||
name:"Sharetea - Avocado Cocoa Rocksalt & Cheese Large Size",
|
||||
price:"90.000"
|
||||
},
|
||||
{
|
||||
image:"https://img20.jd.id/Indonesia/s202x202_/nHBfsgAAFgAAABwACxRf5gACNwE.jpg.webp",
|
||||
name:"YOSHINOYA - Value Voucher Rp 100.000",
|
||||
price:"90.000"
|
||||
},
|
||||
{
|
||||
image:"https://img13.jd.id/Indonesia/s202x202_/nHBfsgAATwAAABUABZrMEQAFL3g.jpg.webp",
|
||||
name:"Fitness One - Membership 1 Bulan (Value Rp 625.000)",
|
||||
price:"21.000"
|
||||
},
|
||||
{
|
||||
image:"https://img10.jd.id/Indonesia/s202x202_/nHBfsgAAEQAAAAYABowcXAACSis.png.webp",
|
||||
name:"Tiket Dunia Fantasi Ancol - Annual Pass (Bebas Main 1 Tahun)",
|
||||
price:"325.000"
|
||||
},
|
||||
{
|
||||
image:"https://img12.jd.id/Indonesia/s202x202_/nHBfsgAAtAAAAAYAAhB8RwAFsSU.png.webp",
|
||||
name:"Waterbom PIK - All Day Pass Ticket",
|
||||
price:"88.000"
|
||||
},
|
||||
{
|
||||
image:"https://img11.jd.id/Indonesia/s202x202_/nHBfsgAA0wAAAAsAAgIg7AADiWM.jpg.webp",
|
||||
name:"Kompas - Digital Premium 12 bulan",
|
||||
price:"339.000"
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<h2> Responsive </h2>
|
||||
<Slider {...settings}>
|
||||
{
|
||||
data.map(it=>{
|
||||
return(
|
||||
<div>
|
||||
<h3>1</h3>
|
||||
<div style={{textAlign:'center',padding:10}}>
|
||||
<img src={it.image} style={{marginLeft:'auto',marginRight:'auto'}} height={'180vh'} width={'100%'} />
|
||||
{it.name}
|
||||
<br/>
|
||||
<span style={{color:'#0061a7'}}>Rp. {it.price}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>3</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>4</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>5</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>6</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>7</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h3>8</h3>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Slider>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ import slider4 from '../../../../assets/images/slider/4.jpg';
|
|||
import slider5 from '../../../../assets/images/slider/5.jpg';
|
||||
import {ItemCard} from "../Vouchers/ItemCard";
|
||||
import ModalVouchersComponent from "../Vouchers/Modal";
|
||||
import PopularItemCardComponent from "./PopularItemCard";
|
||||
import '../Vouchers/style.scss';
|
||||
|
||||
const {
|
||||
|
|
@ -278,20 +279,8 @@ export default class DashboardComponent extends React.Component {
|
|||
</p>
|
||||
|
||||
<Row gutter={10}>
|
||||
{data.map((item, index) => {
|
||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
<ItemCard data={item}/>
|
||||
</Col>)
|
||||
})}
|
||||
<PopularItemCardComponent/>
|
||||
</Row>
|
||||
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user