Radio Group

Usage

Labels

import {
	RadioGroup
} from '@/ui'

const data = [
	{
		"id": "amex",
		"name": "American Express",
	},
	{
		"id": "dinersclub",
		"name": "Diners Club",
	},
	{
		"id": "discover",
		"name": "Discover",
	},
	{
		"id": "jcb",
		"name": "JCB",
	},
	{
		"id": "mastercard",
		"name": "MasterCard",
	},
	{
		"id": "visa",
		"name": "Visa",
	}
]

interface IData {
	id: string
	name: string
}

const getType = (id: string): IData | undefined => {
	for (let index = 0; index < data.length; index++) {
		if (data[index].id === id) return data[index]
	}
	return
}

const [type, setType] = useState<TData>(null!)

const handleChange = (e: any) => {
    let type = getType(e.target.value.toLowerCase())
    if (type) setType(type)
}
				
<RadioGroup
    data={data}
    name='fruit'
    onChange={handleChange}
    selected={type?.id}
    className='mx-auto max-w-md'
    labelStyles='bg-neutral rounded-md'
/>

Icons

import {
	RadioGroup,
    // icons
	AmexIcon,
	DinersClubIcon,
	DiscoverIcon,
	JcbIcon,
	MasterCardIcon,
	VisaIcon,
} from '@/ui'

const data = [
	{
		"id": "amex",
		"name": "American Express",
	}
    ...
]

interface IData {
	id: string
	name: string
}

const getType = (id: string): IData | undefined => {
	for (let index = 0; index < data.length; index++) {
		if (data[index].id === id) return data[index]
	}
	return
}

const getIcon = (key: string) => {
	switch (key) {
		case 'amex':
			return <AmexIcon />
		case 'dinersclub':
			return <DinersClubIcon />
		case 'discover':
			return <DiscoverIcon />
		case 'jcb':
			return <JcbIcon />
		case 'mastercard':
			return <MasterCardIcon />
		case 'visa':
			return <VisaIcon />
	}
}

const [type, setType] = useState<TData>(null!)

const handleChange = (e: any) => {
    let type = getType(e.target.value.toLowerCase())
    if (type) setType(type)
}
				
<RadioGroup
    data={data}
    name='cc-type'
    getIcon={getIcon}
    onChange={handleChange}
    selected={type?.id}
    icons={true}
    className='mx-auto max-w-sm'
    labelStyles='rounded-lg'
/>

Emojis

import {
	RadioGroup,
} from '@/ui'

const data = [
	{ id: 'apples', emoji: '🍏' },
	{ id: 'bananas', emoji: '🍌' },
	{ id: 'grapes', emoji: '🍇' },
	{ id: 'lemons', emoji: '🍋' },
]

const getEmoji = (key: string) => {
	for (let i = 0; i < fruits.length; i++) {
		if (fruits[i].id === key) return fruits[i].emoji
	}
}
				
<RadioGroup
    data={data}
    name='fruits'
    getIcon={getEmoji}
    onChange={handleChange}
    selected={type?.id}
    icons={true}
    className='mx-auto max-w-sm grid-cols-4'
    labelStyles='rounded-full border-4 aspect-square text-4xl bg-dark'
/>