diff --git a/modules/Gallery/DownloadLink.module.scss b/modules/Gallery/DownloadLink.module.scss index 7309eb67b..9c2f414c1 100644 --- a/modules/Gallery/DownloadLink.module.scss +++ b/modules/Gallery/DownloadLink.module.scss @@ -7,3 +7,8 @@ height: 1rem; margin-left: $spacing-1; } + +.disabled { + opacity: 0.5; + cursor: not-allowed; +} diff --git a/modules/Gallery/DownloadLink.tsx b/modules/Gallery/DownloadLink.tsx index 92328de98..5ca9cecbb 100644 --- a/modules/Gallery/DownloadLink.tsx +++ b/modules/Gallery/DownloadLink.tsx @@ -3,6 +3,7 @@ import { DOWNLOAD, useAnalytics } from '@prezly/analytics-nextjs'; import type { Locale } from '@prezly/theme-kit-nextjs'; import { translations } from '@prezly/theme-kit-nextjs'; +import classNames from 'classnames'; import { FormattedMessage } from '@/adapters/client'; import { ButtonLink } from '@/components/Button'; @@ -13,9 +14,10 @@ import styles from './DownloadLink.module.scss'; interface Props { localeCode: Locale.Code; href: string; + disabled: boolean; } -export function DownloadLink({ localeCode, href }: Props) { +export function DownloadLink({ localeCode, href, disabled }: Props) { const { track } = useAnalytics(); function handleClick() { @@ -24,10 +26,14 @@ export function DownloadLink({ localeCode, href }: Props) { return ( diff --git a/modules/Gallery/Gallery.tsx b/modules/Gallery/Gallery.tsx index b8f8ba698..ed32e54f9 100644 --- a/modules/Gallery/Gallery.tsx +++ b/modules/Gallery/Gallery.tsx @@ -29,7 +29,9 @@ export function Gallery({ localeCode, gallery, href, withSharingIcons }: Props)
- {downloadUrl && } + {downloadUrl && ( + + )} {withSharingIcons && }