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

fix: card product responsive

Browse Source
This commit is contained in:
caturbgs 2021-12-09 19:55:53 +07:00
parent 7f89e6562b
commit 525d5534df
2 changed files with 106 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
src/pages/Transaction/Pulsa.js
View File

@ -2,126 +2,120 @@ import React from "react";
import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd"; import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd";
import {DownOutlined, TabletOutlined, UserOutlined} from "@ant-design/icons"; 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 = () => { export const Pulsa = () => {
function handleMenuClick(e) { function handleMenuClick(e) {
message.info("Click on menu item."); message.info("Click on menu item.");
console.log("click", e); console.log("click", e);
} }
const menu = ( const menu = (
<Menu onClick={handleMenuClick}> <Menu onClick={handleMenuClick}>
<Menu.Item key="1" icon={<UserOutlined/>}> <Menu.Item key="1" icon={<UserOutlined/>}>
1st menu item 1st menu item
</Menu.Item> </Menu.Item>
<Menu.Item key="2" icon={<UserOutlined/>}> <Menu.Item key="2" icon={<UserOutlined/>}>
2nd menu item 2nd menu item
</Menu.Item> </Menu.Item>
<Menu.Item key="3" icon={<UserOutlined/>}> <Menu.Item key="3" icon={<UserOutlined/>}>
3rd menu item 3rd menu item
</Menu.Item> </Menu.Item>
</Menu> </Menu>
); );
function success() { function success() {
Modal.success({ Modal.success({
content: 'some messages...some messages...', content: 'some messages...some messages...',
}); });
} }
return ( const dataCard = [
<div> {
<Row> title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
]
return (
<div>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}> <span style={{fontWeight: "bold", marginBottom: "10px"}}>
Sub-Category Sub-Category
</span> </span>
</Row> </Row>
<Row> <Row>
<Space wrap> <Space wrap>
<Dropdown overlay={menu}> <Dropdown overlay={menu}>
<Button <Button
style={{ style={{
marginBottom: "20px", marginBottom: "20px",
color: "grey", color: "grey",
}} }}
> >
<TabletOutlined/> <TabletOutlined/>
Select sub-Category Select sub-Category
<DownOutlined/> <DownOutlined/>
</Button> </Button>
</Dropdown> </Dropdown>
</Space> </Space>
</Row> </Row>
<Row> <Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}> <span style={{fontWeight: "bold", marginBottom: "10px"}}>
Produk & Nominal Produk & Nominal
</span> </span>
</Row> </Row>
<Card> <Row>
<Card.Grid style={gridStyle} onClick={success}> {dataCard.map((item, index) => (
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span> <Col key={index} xs={24} md={16} lg={8}>
<br/> <Card onClick={success}>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span> <span style={{color: "black"}}>{item.title}</span>
</Card.Grid> <br/>
<Card.Grid style={gridStyle}> <span style={{color: "grey", fontSize: 10}}>{item.price}</span>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span> </Card>
<br/> </Col>
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span> ))}
</Card.Grid> </Row>
<Card.Grid style={gridStyle}> <Col style={{textAlign: "right"}}>
<span style={{color: "black"}}>DATA AXIS BRONET 2GB-60HR</span> <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
<br/> Beli Sekarang
<span style={{color: "grey", fontSize: 10}}>Harga : Rp.6.000</span> </Button>
</Card.Grid> </Col>
<Card.Grid style={gridStyle}> </div>
<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>
); );
}; };

4
src/pages/Transaction/Transaction.js
View File

@ -55,10 +55,10 @@ export const Transaction = () => {
Product Product
</TabPane> </TabPane>
<TabPane tab="Prduct" key="4"> <TabPane tab="Prduct" key="4">
Prduct Product
</TabPane> </TabPane>
<TabPane tab="Prdct" key="5"> <TabPane tab="Prdct" key="5">
Prdct Product
</TabPane> </TabPane>
</Tabs> </Tabs>
</Card> </Card>