diff --git a/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx b/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx new file mode 100644 index 000000000..82abc7c03 --- /dev/null +++ b/apps/dapp/components/TooltipsDisplay/TooltipIcon.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from 'react' + +import { InformationCircleIcon } from '@heroicons/react/outline' +import Tooltip, { TooltipProps } from '@reach/tooltip' + +export type TooltipIconProps = Omit + +export const TooltipIcon = forwardRef( + function TooltipIcon(props, ref) { + return ( + + + + ) + } +) diff --git a/apps/dapp/components/input/ImageSelector.tsx b/apps/dapp/components/input/ImageSelector.tsx index 27c6984b5..04ecfc6fc 100644 --- a/apps/dapp/components/input/ImageSelector.tsx +++ b/apps/dapp/components/input/ImageSelector.tsx @@ -1,6 +1,7 @@ import { useState } from 'react' import { PlusIcon, XIcon } from '@heroicons/react/outline' +import clsx from 'clsx' import { FieldError, FieldPathValue, @@ -12,32 +13,38 @@ import { Button } from 'ui' import SvgAirplane from '@components/icons/Airplane' import { Modal } from '@components/Modal' +import { daoCreateTooltipsGetter } from '@components/TooltipsDisplay/daoCreate' import { InputErrorMessage } from './InputErrorMessage' import { InputLabel } from './InputLabel' import { TextInput } from './TextInput' -export function ImageSelectorModal< - FieldValues, - FieldName extends Path ->({ - label, - register, - error, - validation, - imageUrl, - onClose, -}: { +export type ImageSelectorModalProps< + FieldName extends Path, + FieldValues +> = { label: FieldName register: UseFormRegister validation?: Validate>[] error?: FieldError imageUrl: string onClose: () => void -}) { +} + +export function ImageSelectorModal< + FieldValues, + FieldName extends Path +>(props: ImageSelectorModalProps) { + const { label, register, error, validation, imageUrl, onClose } = props + return ( -
+
+ style={{ backgroundImage: `url(${imageUrl})` }} + />
- + ->({ - label, - register, - error, - validation, - imageUrl, -}: { +export type ImageSelectorProps< + FieldName extends Path, + FieldValues +> = { label: FieldName register: UseFormRegister validation?: Validate>[] error?: FieldError imageUrl: string -}) { +} + +export function ImageSelector>( + props: ImageSelectorProps +) { + const { label, register, error, validation, imageUrl } = props + const [showImageSelect, setShowImageSelect] = useState(false) return ( <> -
+
, 'children'> & { mono?: boolean name: string -}) { + tooltip?: ReactNode + _outer?: Omit, 'children'> +} + +export function InputLabel(props: InputLabelProps) { + const { className, mono, name, tooltip, _outer, ...rest } = props + return ( -