PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: initial commit

Browse Source
This commit is contained in:
caturbgs
2021-12-09 09:01:39 +07:00
parent f8fdeefa22
commit f27ddcfe90
55 changed files with 16928 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/pages/Transaction/Pulsa.js Normal file
View File

@@ -0,0 +1,127 @@
import React from "react";
import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd";
import {DownOutlined, TabletOutlined, UserOutlined} from "@ant-design/icons";
//const style = { background: "#0092ff", padding: "8px 0" };
const gridStyle = {
width: "18%",
textAlign: "center",
marginRight: "8px",
marginBottom: "20px",
};
export const Pulsa = () => {
function handleMenuClick(e) {
message.info("Click on menu item.");
console.log("click", e);
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" icon={<UserOutlined/>}>
1st menu item
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined/>}>
2nd menu item
</Menu.Item>
<Menu.Item key="3" icon={<UserOutlined/>}>
3rd menu item
</Menu.Item>
</Menu>
);
function success() {
Modal.success({
content: 'some messages...some messages...',
});
}
return (
<div>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
Sub-Category
</span>
</Row>
<Row>
<Space wrap>
<Dropdown overlay={menu}>
<Button
style={{
marginBottom: "20px",
color: "grey",
}}
>
<TabletOutlined/>
Select sub-Category
<DownOutlined/>
</Button>
</Dropdown>
</Space>
</Row>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
Produk & Nominal
</span>
</Row>
<Card>
<Card.Grid style={gridStyle} onClick={success}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
<Card.Grid style={gridStyle}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span>
</Card.Grid>
</Card>
<Col style={{textAlign: "right"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang
</Button>
</Col>
</div>
);
};

67
src/pages/Transaction/Transaction.js Normal file
View File

@@ -0,0 +1,67 @@
import React from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa";
const {TabPane} = Tabs;
const {Search} = Input;
export const Transaction = () => {
const callback = (key) => {
console.log(key);
};
const routeData = [
{
route: "/app/home",
name: "Home",
},
{
route: "/app/transaction",
name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
},
];
return (
<div>
<BreadcumbComponent data={routeData} text=""/>
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
</Col>
</Row>
<Tabs
defaultActiveKey="1"
onChange={callback}
size="default"
tabBarGutter="50"
>
<TabPane tab="Pulsa" key="1">
<Pulsa/>
</TabPane>
<TabPane tab="Game Voucher" key="2">
Game Voucher
</TabPane>
<TabPane tab="Product" key="3">
Product
</TabPane>
<TabPane tab="Prduct" key="4">
Prduct
</TabPane>
<TabPane tab="Prdct" key="5">
Prdct
</TabPane>
</Tabs>
</Card>
</div>
);
};