diff --git a/packages/console/src/assets/images/external-link.svg b/packages/console/src/assets/images/external-link.svg new file mode 100644 index 000000000..1f778b081 --- /dev/null +++ b/packages/console/src/assets/images/external-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss index 254faa829..dd06d6188 100644 --- a/packages/console/src/components/Button/index.module.scss +++ b/packages/console/src/components/Button/index.module.scss @@ -48,12 +48,6 @@ } } - .trailingIcon { - display: block; - width: 16px; - height: 16px; - } - &.small { height: 30px; padding: 0 _.unit(3); @@ -98,8 +92,8 @@ border-style: solid; &:disabled { - background: var(--color-neutral-70); border-color: var(--color-neutral-70); + color: var(--color-neutral-70); } &:focus-visible { diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx index 0eb3ec238..998c561e2 100644 --- a/packages/console/src/components/Button/index.tsx +++ b/packages/console/src/components/Button/index.tsx @@ -86,7 +86,7 @@ const Button = ({ {showSpinner && } {icon && {icon}} {title && (typeof title === 'string' ? {t(title)} : title)} - {trailingIcon && {trailingIcon}} + {trailingIcon} ); }; diff --git a/packages/console/src/components/LivePreviewButton/index.module.scss b/packages/console/src/components/LivePreviewButton/index.module.scss new file mode 100644 index 000000000..d40f51c09 --- /dev/null +++ b/packages/console/src/components/LivePreviewButton/index.module.scss @@ -0,0 +1,10 @@ +@use '@/scss/underscore' as _; + +.icon { + color: var(--color-text-secondary); + margin-left: _.unit(1.5); + + &.disabled { + color: var(--color-neutral-70); + } +} diff --git a/packages/console/src/components/LivePreviewButton/index.tsx b/packages/console/src/components/LivePreviewButton/index.tsx new file mode 100644 index 000000000..c9d4abe8c --- /dev/null +++ b/packages/console/src/components/LivePreviewButton/index.tsx @@ -0,0 +1,46 @@ +import { conditional } from '@silverhand/essentials'; +import classNames from 'classnames'; +import { useContext } from 'react'; +import { useTranslation } from 'react-i18next'; + +import ExternalLinkIcon from '@/assets/images/external-link.svg'; +import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider'; +import useConfigs from '@/hooks/use-configs'; + +import type { Props as ButtonProps } from '../Button'; +import Button from '../Button'; +import { Tooltip } from '../Tip'; +import * as styles from './index.module.scss'; + +type Props = { + size?: ButtonProps['size']; + isDisabled: boolean; +}; + +const LivePreviewButton = ({ size = 'medium', isDisabled }: Props) => { + const { configs, updateConfigs } = useConfigs(); + const { userEndpoint } = useContext(AppEndpointsContext); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return ( + +