File size: 1,483 Bytes
8a37e0a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { IconButton, spinAnimation, Tooltip } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { useDynamicPromptsModal } from 'features/dynamicPrompts/hooks/useDynamicPromptsModal';
import {
selectDynamicPromptsIsError,
selectDynamicPromptsIsLoading,
} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiBracketsCurlyBold } from 'react-icons/pi';
const loadingStyles: SystemStyleObject = {
svg: { animation: spinAnimation },
};
export const ShowDynamicPromptsPreviewButton = memo(() => {
const { t } = useTranslation();
const isLoading = useAppSelector(selectDynamicPromptsIsLoading);
const isError = useAppSelector(selectDynamicPromptsIsError);
const { isOpen, onOpen } = useDynamicPromptsModal();
return (
<Tooltip label={isLoading ? t('dynamicPrompts.loading') : t('dynamicPrompts.showDynamicPrompts')}>
<IconButton
size="sm"
variant="promptOverlay"
isDisabled={isOpen}
aria-label={t('dynamicPrompts.showDynamicPrompts')}
icon={<PiBracketsCurlyBold />}
onClick={onOpen}
sx={isLoading ? loadingStyles : undefined}
colorScheme={isError && !isLoading ? 'error' : 'base'}
/>
</Tooltip>
);
});
ShowDynamicPromptsPreviewButton.displayName = 'ShowDynamicPromptsPreviewButton';
|