landx-components-library-

Landx Library Components

Sebelum menggunakan library ini, pastikan terlebih dahulu menginstall

npm install @mui/material @emotion/react @emotion/styled @mui/styles @carbon/icons-react

Instalasi

Note: library ini hanya bisa digunakan untuk project yang React-based

npm i landx-components-library-

Theming Material UI

untuk dapat menggunakan Material UI dengan styling Landx, maka LandxTheme perlu di apply ke material UI tersebut. cara penggunaannya adalah sebagai berikut:

pada file App.js :

import { ThemeProvider } from  '@mui/material/styles';
import { LandxTheme } from 'landx-components-library-';

function  App() {
    return (    
	        <ThemeProvider theme={LandxTheme}>
		        .........
		        .........
	        </ThemeProvider>
    );
}    
  

export  default  App;

Components

Saat ini components yang sudah tersedia yaitu :

1. Navbar (digunakan sebagai bottom navigation di react application)
2. Header
3. Listing Card (untuk menampilkan listing yang tersedia)
4. Modal (Template modal untuk menampilkan pesan)

Navbar

cara penggunaan Navbar adalah seperti berikut

import {Navbar} from 'landx-components-library-'
....
<Navbar
  buttons={[
    {
      activeIcon: './path-menuju-ke-icon/homeActive.svg',
      icon: './path-menuju-ke-icon/home.svg,
      text: 'Home',
      value: '/home'
    },
    {
      activeIcon: './path-menuju-ke-icon/insightActive.svg,
      icon: './path-menuju-ke-icon/insight.svg',
      text: 'Insight',
      value: '/insight'
    }
    ]}
  onClick={() => {}}
/>
...

berdasarkan code diatas, akan menampilkan 2 button, yaitu home dan insight.

jadi parameter yang diterima adalah sebagai berikut

1. buttons : berisi array dari button yang akan ditampilkan, satu button terdiri dari 4 property, yaitu: a. activeIcon = gambar (icon) yang ditampilkan jika button tersebut sedang aktif b. icon = gambar (icon) yang ditampilkan jika button tersebut sedang tidak aktif c. text = text yang akan ditampilkan dibawah icon d. value = nilai dari button, bisa dikirim berupa string path
2. onClick : function yang akan dijalankan jika salah satu button diclick

Header

Header digunakan untuk menampilkan data user seperti yang terdapat pada apps. cara penggunaannya adalah sebagai berikut :

import { Header} from  'landx-components-library-';
.....   
    <LandxHeader 
	    assetPercentage="-1.23" 
		assetValue="11.000.000"
	    logo="./path-menujulogo/landx.png"
	    userName="user-name" 
	 />
......

Modal

adalah template yang akan digunakan untuk menampilkan modal Landx. cara penggunaannya adalah sebagai berikut :

import { ModalComponent } from  'landx-components-library-';
import { Modal } from  '@mui/material'
.......
<Modal
   open={true}
   aria-describedby="modal for landx components"
   aria-labelledby="landx modal">
      <div>
	      <ModalComponent
		      accbutton="OK"
		      cancelButton="cancel"
		      onClick={() => {}}
		      title="This is the title"
		    />
	    </div>
</Modal>
.....

Listing Card

sebuah template card untuk menampilkan data dari sebuah listing. cara penggunaannya adalah sebagai berikut :

import { ListingCard} from  'landx-components-library-';
....
<ListingCard
  code="COD3"
  companyName="PT Padang Merdeka"
  currentValue={9000000000}
  detailVariables={[
    {
      title: 'Harga per Lot',
      value: 'Rp 1,000,000'
    },
    {
      title: 'Jumlah Lot',
      value: '7000'
    },
    {
      title: 'Periode Dividen',
      value: '4 Bulan'
    },
    {
      title: 'Estimasi Dividen',
      value: '10-15% /tahun'
    }
  ]}
  images=[
      'https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
      'https://images.pexels.com/photos/704569/pexels-photo-704569.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
      'https://images.pexels.com/photos/315755/pexels-photo-315755.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
  ]
  industryType="Tipe Industri"
  legalCompanyName="Padang Minang"
  maxValue={10000000000}
  onClick={() => {}}
  timeRemaining="12"
  type="saham"
/>
.....