@prezly/theme-kit-ui
Version:
UI components for Prezly themes
58 lines (57 loc) • 2.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GalleryMedia = GalleryMedia;
var _react = _interopRequireDefault(require("react"));
var _outline = require("@heroicons/react/24/outline");
var _uploadcareImage = require("@prezly/uploadcare-image");
var _tailwindMerge = require("tailwind-merge");
var _index = require("../Link/index.cjs");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function GalleryMedia(_ref) {
var _intl$imagesTitle, _intl$videosTitle;
var {
gallery,
className,
intl = {}
} = _ref;
var {
cover,
images,
videos,
href,
name
} = gallery;
return /*#__PURE__*/_react.default.createElement(_index.Link, {
href: href,
className: (0, _tailwindMerge.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.default.createElement(_uploadcareImage.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.default.createElement("div", {
className: (0, _tailwindMerge.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.default.createElement("p", {
className: "title-x-small text-gray-100"
}, name), /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-center justify-between"
}, (images > 0 || videos > 0) && /*#__PURE__*/_react.default.createElement("div", {
className: "flex items-center gap-3"
}, images > 0 && /*#__PURE__*/_react.default.createElement("span", {
className: "flex text-gray-100"
}, /*#__PURE__*/_react.default.createElement(_outline.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.default.createElement("span", {
className: "flex text-gray-100"
}, /*#__PURE__*/_react.default.createElement(_outline.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.default.createElement(_outline.ArrowRightIcon, {
className: "w-5 h-5 text-white"
}))));
}