mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-08 07:12:49 +00:00
* beginnings of app directory * settings mostly good * colocate way more components * flatten components folder * reexport QueryClientProvider from client * move CodeBlock back to interface * colocate Explorer, KeyManager + more * goddamn captialisation * get toasts out of components * please eslint * no more src directory * $ instead of : * added back RowHeader component * fix settings modal padding * more spacing, less margin * fix sidebar locations button * fix tags sidebar link * clean up back button * added margin to explorer context menu to prevent contact with edge of viewport * don't export QueryClientProvider from @sd/client * basic guidelines * import interface correctly * remove old demo data * fix onboarding layout * fix onboarding navigation * fix key manager settings button --------- Co-authored-by: Jamie Pine <ijamespine@me.com>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import { useCallback, useRef, useState } from 'react';
|
|
import { HexColorPicker } from 'react-colorful';
|
|
import { UseControllerProps, useController } from 'react-hook-form';
|
|
import useClickOutside from '~/hooks/useClickOutside';
|
|
|
|
interface Props extends UseControllerProps {
|
|
className?: string;
|
|
}
|
|
|
|
export default ({ className, ...props }: Props) => {
|
|
const { field } = useController(props);
|
|
const popover = useRef<HTMLDivElement | null>(null);
|
|
const [isOpen, toggle] = useState(false);
|
|
|
|
const close = useCallback(() => toggle(false), []);
|
|
useClickOutside(popover, close);
|
|
|
|
return (
|
|
<div className={clsx('relative mt-3 flex items-center', className)}>
|
|
<div
|
|
className={clsx('h-4 w-4 rounded-full shadow', isOpen && 'dark:border-gray-500')}
|
|
style={{ backgroundColor: field.value }}
|
|
onClick={() => toggle(true)}
|
|
/>
|
|
{/* <span className="inline ml-2 text-sm text-gray-200">Pick Color</span> */}
|
|
|
|
{isOpen && (
|
|
<div
|
|
style={{ top: 'calc(100% + 7px)' }}
|
|
className="absolute left-0 rounded-md shadow"
|
|
ref={popover}
|
|
>
|
|
<HexColorPicker color={field.value} onChange={field.onChange} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|