feat: initial commit

src/pages/Product/Product.js

@@ -0,0 +1,70 @@
+import React from "react";
+import {Button, Card, Col, Input, Row, Tabs} from "antd";
+import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {Pulsa} from "./Pulsa";
+
+const {TabPane} = Tabs;
+const {Search} = Input;
+
+export const Product = () => {
+  const callback = (key) => {
+    console.log(key);
+  };
+  const routeData = [
+    {
+      route: "/app/home",
+      name: "Home",
+    },
+    {
+      route: "/app/product",
+      name: <span style={{fontWeight: 'bold'}}>Product</span>,
+    },
+  ];
+  return (
+      <div>
+        <BreadcumbComponent data={routeData}/>
+        <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}}
+              />
+              <Button>
+                <PlusSquareOutlined/> New
+              </Button>
+            </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>
+  );
+};