awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(frontend): fixed all eslint errors

Browse Source
This commit is contained in:
akhilmhdh
2023-01-17 20:53:35 +05:30
parent 9f82e2d836
commit cf7834bfc3
184 changed files with 6255 additions and 6117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/components/basic/Listbox.tsx
View File

@@ -1,10 +1,5 @@
import React from 'react';
import { Fragment } from 'react';
import {
faAngleDown,
faCheck,
faPlus,
} from '@fortawesome/free-solid-svg-icons';
import React, { Fragment } from 'react';
import { faAngleDown, faCheck, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Listbox, Transition } from '@headlessui/react';
@@ -27,72 +22,69 @@ interface ListBoxProps {
* @param {function} obj.buttonAction - if there is a button at the bottom of the list, this is the action that happens when you click the button
* @returns
*/
export default function ListBox({
const ListBox = ({
selected,
onChange,
data,
text,
buttonAction,
isFull,
}: ListBoxProps): JSX.Element {
isFull
}: ListBoxProps): JSX.Element => {
return (
<Listbox value={selected} onChange={onChange}>
<div className='relative'>
<div className="relative">
<Listbox.Button
className={`text-gray-400 relative ${
isFull ? 'w-full' : 'w-52'
} cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
>
<div className='flex flex-row'>
<div className="flex flex-row">
{text}
<span className='ml-1 cursor-pointer block truncate font-semibold text-gray-300 capitalize'>
<span className="ml-1 cursor-pointer block truncate font-semibold text-gray-300 capitalize">
{' '}
{selected}
</span>
</div>
{data && (
<div className='cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
<FontAwesomeIcon icon={faAngleDown} className='text-md mr-1.5' />
<div className="cursor-pointer pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<FontAwesomeIcon icon={faAngleDown} className="text-md mr-1.5" />
</div>
)}
</Listbox.Button>
{data && (
<Transition
as={Fragment}
leave='transition ease-in duration-100'
leaveFrom='opacity-100'
leaveTo='opacity-0'
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className='border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm'>
<Listbox.Options className="border border-mineshaft-700 z-50 p-2 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{data.map((person, personIdx) => (
<Listbox.Option
key={personIdx}
className={({ active, selected }) =>
key={`${person}.${personIdx + 1}`}
className={({ active, selected: isSelected }) =>
`my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md capitalize ${
selected ? 'bg-white/10 text-gray-400 font-bold' : ''
isSelected ? 'bg-white/10 text-gray-400 font-bold' : ''
} ${
active && !selected
active && !isSelected
? 'bg-white/5 text-mineshaft-200 cursor-pointer'
: 'text-gray-400'
} `
}
value={person}
>
{({ selected }) => (
{({ selected: isSelected }) => (
<>
<span
className={`block truncate text-primary${
selected ? 'font-medium' : 'font-normal'
isSelected ? 'font-medium' : 'font-normal'
}`}
>
{person}
</span>
{selected ? (
<span className='text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3'>
<FontAwesomeIcon
icon={faCheck}
className='text-md ml-1'
/>
<span className="text-primary rounded-lg absolute inset-y-0 left-0 flex items-center pl-3">
<FontAwesomeIcon icon={faCheck} className="text-md ml-1" />
</span>
) : null}
</>
@@ -100,13 +92,10 @@ export default function ListBox({
</Listbox.Option>
))}
{buttonAction && (
<button
onClick={buttonAction}
className='cursor-pointer w-full'
>
<div className='my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2'>
<span className='rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4'>
<FontAwesomeIcon icon={faPlus} className='text-lg' />
<button type="button" onClick={buttonAction} className="cursor-pointer w-full">
<div className="my-0.5 relative flex justify-start cursor-pointer select-none py-2 pl-10 pr-4 rounded-md text-gray-400 hover:bg-lime-300 duration-200 hover:text-black hover:font-semibold mt-2">
<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
<FontAwesomeIcon icon={faPlus} className="text-lg" />
</span>
Add Project
</div>
@@ -118,4 +107,6 @@ export default function ListBox({
</div>
</Listbox>
);
}
};
export default ListBox;