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 React, { Component } from "react";
|
||||||
import Slider from "react-slick";
|
import Slider from "react-slick";
|
||||||
|
|
||||||
export default class Responsive extends Component {
|
export default class PopularItemCardComponent extends Component {
|
||||||
render() {
|
render() {
|
||||||
var settings = {
|
const settings = {
|
||||||
dots: true,
|
dots: true,
|
||||||
infinite: false,
|
infinite: false,
|
||||||
speed: 500,
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2> Responsive </h2>
|
|
||||||
<Slider {...settings}>
|
<Slider {...settings}>
|
||||||
<div>
|
{
|
||||||
<h3>1</h3>
|
data.map(it=>{
|
||||||
</div>
|
return(
|
||||||
<div>
|
<div>
|
||||||
<h3>2</h3>
|
<div style={{textAlign:'center',padding:10}}>
|
||||||
</div>
|
<img src={it.image} style={{marginLeft:'auto',marginRight:'auto'}} height={'180vh'} width={'100%'} />
|
||||||
<div>
|
{it.name}
|
||||||
<h3>3</h3>
|
<br/>
|
||||||
</div>
|
<span style={{color:'#0061a7'}}>Rp. {it.price}</span>
|
||||||
<div>
|
</div>
|
||||||
<h3>4</h3>
|
</div>
|
||||||
</div>
|
);
|
||||||
<div>
|
})
|
||||||
<h3>5</h3>
|
}
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>6</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>7</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>8</h3>
|
|
||||||
</div>
|
|
||||||
</Slider>
|
</Slider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,7 @@ import slider4 from '../../../../assets/images/slider/4.jpg';
|
||||||
import slider5 from '../../../../assets/images/slider/5.jpg';
|
import slider5 from '../../../../assets/images/slider/5.jpg';
|
||||||
import {ItemCard} from "../Vouchers/ItemCard";
|
import {ItemCard} from "../Vouchers/ItemCard";
|
||||||
import ModalVouchersComponent from "../Vouchers/Modal";
|
import ModalVouchersComponent from "../Vouchers/Modal";
|
||||||
|
import PopularItemCardComponent from "./PopularItemCard";
|
||||||
import '../Vouchers/style.scss';
|
import '../Vouchers/style.scss';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|
@ -278,20 +279,8 @@ export default class DashboardComponent extends React.Component {
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Row gutter={10}>
|
<Row gutter={10}>
|
||||||
{data.map((item, index) => {
|
<PopularItemCardComponent/>
|
||||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
|
||||||
<ItemCard data={item}/>
|
|
||||||
</Col>)
|
|
||||||
})}
|
|
||||||
</Row>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user