From b20835257e2fb67c74f15c67e0552c6b4ed94638 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Thu, 9 Dec 2021 19:55:53 +0700
Subject: [PATCH] fix: card product responsive

---
 src/pages/Transaction/Pulsa.js       | 214 +++++++++++++--------------
 src/pages/Transaction/Transaction.js |   4 +-
 2 files changed, 106 insertions(+), 112 deletions(-)

diff --git a/src/pages/Transaction/Pulsa.js b/src/pages/Transaction/Pulsa.js
index 6392849..ded433a 100644
--- a/src/pages/Transaction/Pulsa.js
+++ b/src/pages/Transaction/Pulsa.js
@@ -2,126 +2,120 @@ 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);
-  }
+    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>
-  );
+    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...',
-    });
-  }
+    function success() {
+        Modal.success({
+            content: 'some messages...some messages...',
+        });
+    }
 
-  return (
-      <div>
-        <Row>
+    const dataCard = [
+        {
+            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"}}>
           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>
+            </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>
+            </Row>
+            <Row>
+                {dataCard.map((item, index) => (
+                    <Col key={index} xs={24} md={16} lg={8}>
+                        <Card onClick={success}>
+                            <span style={{color: "black"}}>{item.title}</span>
+                            <br/>
+                            <span style={{color: "grey", fontSize: 10}}>{item.price}</span>
+                        </Card>
+                    </Col>
+                ))}
+            </Row>
+            <Col style={{textAlign: "right"}}>
+                <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
+                    Beli Sekarang
+                </Button>
+            </Col>
+        </div>
   );
 };
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index c255002..9d42dfe 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -55,10 +55,10 @@ export const Transaction = () => {
               Product
             </TabPane>
             <TabPane tab="Prduct" key="4">
-              Prduct
+              Product
             </TabPane>
             <TabPane tab="Prdct" key="5">
-              Prdct
+              Product
             </TabPane>
           </Tabs>
         </Card>