@prezly/theme-kit-ui
Version:
UI components for Prezly themes
51 lines • 2.5 kB
JavaScript
import React from "react";
import { ArrowRightIcon, PhotoIcon, VideoCameraIcon } from '@heroicons/react/24/outline';
import { UploadcareImage } from '@prezly/uploadcare-image';
import { twMerge } from 'tailwind-merge';
import { Link } from "../Link/index.mjs";
export function GalleryMedia(_ref) {
var _intl$imagesTitle, _intl$videosTitle;
var {
gallery,
className,
intl = {}
} = _ref;
var {
cover,
images,
videos,
href,
name
} = gallery;
return /*#__PURE__*/React.createElement(Link, {
href: href,
className: twMerge('relative w-full md:w-max transition-transform duration-300 hover:scale-[1.02] hover:shadow-xLarge', className),
contentClassName: "p-0"
}, cover && /*#__PURE__*/React.createElement(UploadcareImage, {
className: "aspect-[17/12] md:aspect-[6/7] w-full max-w-full md:max-w-[256px]",
lazy: true,
layout: "fill",
objectFit: "cover",
imageDetails: cover
}), /*#__PURE__*/React.createElement("div", {
className: twMerge('absolute inset-0', 'bg-[linear-gradient(180deg,rgba(39,39,42,0.00)_0%,rgba(39,39,42,0.32)_54.69%,rgba(39,39,42,0.48)_78.12%,rgba(39,39,42,0.60)_100%)]', 'flex flex-col justify-end p-6 gap-2', 'transition-transform group-hover:transform group-hover:scale-[1.05]')
}, /*#__PURE__*/React.createElement("p", {
className: "title-x-small text-gray-100"
}, name), /*#__PURE__*/React.createElement("div", {
className: "flex items-center justify-between"
}, (images > 0 || videos > 0) && /*#__PURE__*/React.createElement("div", {
className: "flex items-center gap-3"
}, images > 0 && /*#__PURE__*/React.createElement("span", {
className: "flex text-gray-100"
}, /*#__PURE__*/React.createElement(PhotoIcon, {
className: "w-5 h-5 mr-2"
}), videos === 0 ? // FIXME: use interpolated i18n string here
"".concat(images, " ").concat((_intl$imagesTitle = intl['images.title']) !== null && _intl$imagesTitle !== void 0 ? _intl$imagesTitle : 'Images') : images), videos > 0 && /*#__PURE__*/React.createElement("span", {
className: "flex text-gray-100"
}, /*#__PURE__*/React.createElement(VideoCameraIcon, {
className: "w-5 h-5 mr-2"
}), images === 0 ? // FIXME: use interpolated i18n string here
"".concat(videos, " ").concat((_intl$videosTitle = intl['videos.title']) !== null && _intl$videosTitle !== void 0 ? _intl$videosTitle : 'Videos') : videos)), /*#__PURE__*/React.createElement(ArrowRightIcon, {
className: "w-5 h-5 text-white"
}))));
}