@heroicons/react/solid#SelectorIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#SelectorIcon.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: token-price-select.tsx From arkadiko with GNU General Public License v3.0 | 5 votes |
|
export function TokenPriceSelect({ tokenPrices, selected, setSelected }: Props) {
return (
<Listbox value={selected} onChange={setSelected}>
{({ open }) => (
<>
<Listbox.Label className="block text-sm font-medium text-gray-700 sr-only">Token price</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">{selected.name}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{tokenPrices.map((token:any) => (
<Listbox.Option
key={token.id}
className={({ active }) =>
classNames(
active ? 'text-white bg-indigo-600' : 'text-gray-900',
'cursor-default select-none relative py-2 pl-3 pr-9'
)
}
value={token}
>
{({ selected, active }) => (
<>
<span className={classNames(selected ? 'font-semibold' : 'font-normal', 'block truncate')}>
{token.name}
</span>
{selected ? (
<span
className={classNames(
active ? 'text-white' : 'text-indigo-600',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<CheckIcon className="w-5 h-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)
}
Example #2
| Source File: index.tsx From interbtc-ui with Apache License 2.0 | 5 votes |
|
SelectButton = ({
className,
children,
variant = 'optionSelector',
error,
...rest
}: SelectButtonProps): JSX.Element => (
<Listbox.Button
className={clsx(
'focus:outline-none',
'focus:ring',
'focus:ring-opacity-50',
'relative',
'w-full',
BORDER_CLASSES,
'rounded-md',
'pl-3',
'pr-10',
'py-2',
'text-left',
'cursor-default',
'leading-7',
{
[clsx('bg-white', 'focus:border-interlayDenim-300', 'focus:ring-interlayDenim-200')]:
process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT
},
{
[clsx(
'dark:bg-kintsugiMidnight-900',
'dark:focus:border-kintsugiSupernova-300',
'dark:focus:ring-kintsugiSupernova-200'
)]: process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA
},
{
[clsx('dark:bg-kintsugiMidnight')]: variant === SELECT_VARIANTS.formField
},
{
[clsx(
{ 'border-interlayCinnabar': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT },
{ 'dark:border-kintsugiThunderbird': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA }
)]: error
},
className
)}
{...rest}
>
{children}
<span
className={clsx(
'ml-3',
'absolute',
'inset-y-0',
'right-0',
'flex',
'items-center',
'pr-2',
'pointer-events-none'
)}
>
<SelectorIcon className={clsx('h-5', 'w-5', 'text-textSecondary')} aria-hidden='true' />
</span>
</Listbox.Button>
)
Example #3
| Source File: DropdownMenu.tsx From sdk with ISC License | 5 votes |
|
export default function DropdownMenu({title, selectedItem, setSelectedItem, items}: DropdownMenuProps) {
return(
<div className={"flex items-center justify-center"}>
<div className={"w-60 max-w-xs"}>
<Listbox value={selectedItem} onChange={setSelectedItem} as={"div"} className={"space-y-1"}>
{({open}) => (
<>
<Listbox.Label className={"block text-sm font-medium"}>{title}</Listbox.Label>
<div className={"relative"}>
<span className={"inline-block w-full rounded-md"}>
<Listbox.Button
className={classNames(
"cursor-default relative w-full",
"py-2 pl-3 pr-10 text-center",
"rounded-md shadow-md",
"sm:text-sm",
"focus:outline-none focus-visible:ring-2",
"focus-visible:ring-opacity-75 focus-visible:ring-white",
"focus-visible:ring-offset-2 focus-visible:border-indigo-500"
)}
>
<span className={"block truncate text-lg"}>{selectedItem?.label || ""}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true"/>
</span>
</Listbox.Button>
</span>
<Transition
// as={Fragment}
show={open}
unmount={false}
enter="transition duration-100 ease-in"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
className={"absolute mt-1 w-full rounded-md dark:bg-gray-600"}
>
<Listbox.Options static className={"z-10 overflow-auto max-h-60 sm:text-sm"}>
{items.map((item) => {
const selected = item.key === selectedItem.key;
return(<Listbox.Option
key={item.key}
value={item}
disabled={item.disabled || selected}
>
{({ active }) => (
<div className={classNames(
"cursor-default select-none relative",
active ? "bg-blue-500" : ""
)}>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{item.label}
</span>
</div>
)}
</Listbox.Option>
)})}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</div>
</div>
)
}
Example #4
| Source File: index.tsx From platform with MIT License | 3 votes |
|
function MemberSearch({ members, setSelectedMemberId }) {
const [query, setQuery] = useState('');
const [selectedMember, setSelectedMember] = useState();
const filteskyMembers =
query === ''
? members
: members.filter((member) => {
return member.name.toLowerCase().includes(query.toLowerCase())
});
const handleSelectedMember = member => {
setSelectedMember(member);
setSelectedMemberId(member.id);
};
return (
<Combobox as="div" value={selectedMember} onChange={handleSelectedMember}>
<Combobox.Label className="block text-sm font-medium text-gray-700">Select Member</Combobox.Label>
<div className="relative mt-1">
<Combobox.Input
className="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm"
onChange={(event) => setQuery(event.target.value)}
displayValue={(member) => member.name}
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
<SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Combobox.Button>
{filteskyMembers.length > 0 && (
<Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{filteskyMembers.map((member) => (
<Combobox.Option
key={member.id}
value={member}
className={({ active }) =>
classNames(
'relative cursor-default select-none py-2 pl-3 pr-9',
active ? 'bg-sky-600 text-white' : 'text-gray-900'
)
}
>
{({ active, selected }) => (
<>
<div className="flex">
<span className={classNames('truncate', selected && 'font-semibold')}>{member.name}</span>
<span
className={classNames(
'ml-2 truncate text-gray-500',
active ? 'text-sky-200' : 'text-gray-500'
)}
>
{member.email}
</span>
</div>
{selected && (
<span
className={classNames(
'absolute inset-y-0 right-0 flex items-center pr-4',
active ? 'text-white' : 'text-sky-600'
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
)}
</>
)}
</Combobox.Option>
))}
</Combobox.Options>
)}
</div>
</Combobox>
)
}
