indrafixui

indrafixui

Simple Ui

Install

npm install --save indrafixui

Usage

import React from 'react'

import { 
	ButtonIn, 
	InputIn, 
	CheckBoxIn, 
	RadioButtonIn, 
	HeaderIn, 
	CardIn 
} from 'indrafixui'
import 'indrafixui/dist/index.css'

const App = () => {
	const [isChecked, setChecked] = React.useState(false);
	
	let logo = 'https://s.catch.com.au/static/catch/images/logo-8b0ef96c7b.svg'
	let theLink = 'https://warungpintar.co.id/'
	
	let myArrayCheckBox = [
		{
			"name": "One",
			"value": "1",
		},
		{
			"name": "Two",
			"value": "2",
		},
		{
			"name": "Tree",
			"value": "3",
		},
	]

	let listArray = 
		{
			"id": "213a325e-2284-40cb-970d-3f69e295b395",
			"name": "Apple Genuine Earpods with 3.5mm Plug",
			"salePrice": 1800,
			"retailPrice": 4500,
			"imageUrl": "https://s.catch.com.au/images/product/0003/3901/5a8a6ff4bfd15691741540_w200.jpg",
			"quantityAvailable": 32
		}


	function toogleCheck (evt) {
		setChecked(!isChecked)
		console.log(evt.target.value)
	}

	function changeValue (evt) {
		console.log(evt.target.value)
	}

  return (
  	<div>
  		<HeaderIn logo={logo} addlink={theLink} />
  		<CardIn name={listArray.name} textTwo={listArray.salePrice} textTree={listArray.retailPrice} imageUrl={listArray.imageUrl}/>
  		<ButtonIn buttonName="Submit Dong Say" group="medium" />
  		<div className="center2">
  			<InputIn type="text" value="" label="this is label One" onChange={changeValue}/>
  			<InputIn model="two" type="text" value="" label="this is label Two" onChange={changeValue}/>
  		</div>
  		
  		<h1>Check Box Component</h1>
  		<div className="center">
			{myArrayCheckBox ?
              myArrayCheckBox.map((item, index) => {
                return (
					<CheckBoxIn key={index} label={item.name} val={item.value} onClick={toogleCheck} />                
                )
              })
            :null}
  		</div>
  		
  		<h1>Radio Buton Component</h1>
  		<div className="center">
			{myArrayCheckBox ?
              myArrayCheckBox.map((item, index) => {
                return (
					<RadioButtonIn key={index} label={item.name} val={item.value} onClick={toogleCheck} />                
                )
              })
            :null}
  		</div>
  	</div>

  ) 
}
export default App

License

MIT © MIT