Select

import { Select } from 'alurkerja-ui'
export const SelectPage = () => {
	return(
		<Select
		  options={[
		    { label: 'Opsi 1', value: 1 },
		    { label: 'Opsi 2', value: 2 },
		  ]}
		/>
	)
}

import { Select } from 'alurkerja-ui'
import axios from "axios"
export const SelectPage = () => {
	const [options, setOptions] = useState()
	const [isLoading, setIsLoading] = useState(false)
	
	useEffect(() => {
	  setIsLoading(true)
	  axios
	   .get('https://dummyjson.com/products')
	   .then((res) => { setOptions(res.data.products.map((item: any) => ({ label: item.title, value: item.id })))})
	   .finally(() => {setIsLoading(false)})
	}, [])

	return(
		<Select options={options} isLoading={isLoading} />
	)
}

import { Select } from 'alurkerja-ui'
import { SelectInstance } from 'react-select'

export const SelectPage = () => {
	const ref = useRef<SelectInstance>()

	return(
		<div className="space-y-4">
		  <Select
		    ref={ref}
		    options={[{ label: 'Opsi 1', value: 1 },{ label: 'Opsi 2', value: 2 },]}
		  />
		  <Button
		    onClick={() => {
		      ref.current?.clearValue()
		     }}
		  >
		    Reset
		  </Button>
		</div>
	)
}

import { Select } from 'alurkerja-ui'
export const SelectPage = () => {
	return(
		<Select
		  options={[
		    { label: 'Opsi 1', value: 1 },
		    { label: 'Opsi 2', value: 2 },
		  ]}
		  defaultValue={{ label: 'Opsi 1', value: 1 }}
		/>
	)
}

import { Select } from 'alurkerja-ui'
export const SelectPage = () => {
	return(
		<Select
		  options={[
		    { label: 'Opsi 1', value: 1 },
		    { label: 'Opsi 2', value: 2 },
		  ]}
		  defaultValue={{ label: 'Opsi 1', value: 1 }}
		  isDisabled
		/>
	)
}

import { Select } from 'alurkerja-ui'
export const SelectPage = () => {
	return(
		<Select
		  options={[
		    { label: 'Opsi 1', value: 1 },
		    { label: 'Opsi 2', value: 2 },
		  ]}
		  defaultValue={{ label: 'Opsi 1', value: 1 }}
		  isLoading
		  isDisabled
		/>
	)
}