hh-ui-components
Version:
25 lines • 2.3 kB
JavaScript
import React from "react";
import classNames from "classnames";
export var CollectionHeader = function (_a) {
var name = _a.name, body = _a.body, label = _a.label, imageUrl = _a.imageUrl, _b = _a.variants, variants = _b === void 0 ? "CollectionHeaderNoImg" : _b;
var classes = classNames({
"": true,
"absolute bottom-0 left-0 right-0 p-[20px] lg:p-[40px] 2xl:p-[2.778vw] ": variants === "CollectionHeaderImg",
"bottom-0 left-0 right-0 p-[20px] lg:p-[40px] 2xl:p-[2.778vw]": variants === "CollectionHeaderNoImg"
});
return (React.createElement("div", { className: "relative" },
variants === "CollectionHeaderNoImg" ? ("") : (React.createElement("div", { className: "relative w-full h-[280px] lg:h-[370px] 2xl:h-[25.694vw] block overflow-hidden bg-primary" },
React.createElement("div", { className: " w-full h-[280px] lg:h-[370px] 2xl:h-[25.694vw] bg-[#D1D5DB] " },
React.createElement("div", { className: " absolute bottom-0 w-full h-full bg-gradient-[205.5deg] bg-gradient-to-b from-gradientColors-1 to-gradientColors-2 opacity-[.5] " }),
React.createElement("img", { className: "object-fill ", src: imageUrl })))),
React.createElement("div", { className: classes },
React.createElement("div", { className: "".concat(variants === "CollectionHeaderNoImg" ? "text-subdued" : "text-white", " text-base lg:text-2xl 2xl:text-[1.667vw] capitalize") },
React.createElement("div", { className: "flex capitalize " },
React.createElement("span", null, label),
" ", "/",
" ",
React.createElement("span", null, label))),
React.createElement("h1", { className: "m-auto ".concat(variants === "CollectionHeaderNoImg" ? "text-lnk" : "text-white", " capitalize text-h3 md:text-h3-md lg:text-h3-lg 2xl:text-h3-2xl font-normal ") }, name),
React.createElement("h3", { className: "".concat(variants === "CollectionHeaderNoImg" ? "text-black" : "text-white", " text-sm pt-[0.6771vw] lg:text-base 2xl:text-[1.111vw] 2xl:leading-[1.556vw] font-normal max-w-[335px] lg:max-w-[505px] 2xl:max-w-[35.069vw]") }, body ? body.slice(0, 102) : ""))));
};
//# sourceMappingURL=CollectionHeader.js.map