Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

💄 SelectBox Component

Browse Source
This commit is contained in:
Timur Ercan
2023-02-23 17:49:04 +01:00
parent 3d0b49ac5e
commit 4f0161b0fa
4 changed files with 88 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
packages/ui/components/selectBox/SelectBox.tsx Normal file
View File

@ -0,0 +1,86 @@
import { classNames } from "@documenso/lib";
import { Listbox, Transition } from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
import React, { Fragment, useState } from "react";
export function SelectBox(props: any) {
return (
<div className={props.className}>
<Listbox
value={props.value}
onChange={(e) => {
props.onChange(e);
}}
>
{({ open }) => (
<>
<Listbox.Label className="block text-sm font-medium text-gray-700">
{props.label}
</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
<span className="block truncate">{props?.value?.label}</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon
className="h-5 w-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 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">
{props.options.map((option: any) => (
<Listbox.Option
key={option.value}
className={({ active }) =>
classNames(
active ? "text-white bg-neon" : "text-gray-900",
"relative cursor-default select-none py-2 pl-3 pr-9"
)
}
value={option}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate"
)}
>
{option.label}
</span>
{option.value === props.value.value ? (
<span
className={classNames(
active ? "text-white" : "text-neon",
"absolute inset-y-0 right-0 flex items-center pr-4"
)}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
</div>
);
}

1
packages/ui/components/selectBox/index.ts Normal file
View File

@ -0,0 +1 @@
export { SelectBox } from "./SelectBox";