hh-ui-components
Version:
29 lines • 3.15 kB
JavaScript
import React from "react";
import { Button } from "../../Button";
export var BlogFeature = function (_a) {
var title = _a.title, tagName = _a.tagName, date = _a.date, imageUrl = _a.imageUrl, handle = _a.handle, excerpt = _a.excerpt;
return (React.createElement("div", { className: "relative bg-primary" },
React.createElement("div", { className: "h-full overflow-hidden grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-2 " },
React.createElement("div", { className: " relative cursor-pointer " },
React.createElement("div", { className: " relative block h-full w-full overflow-hidden " },
React.createElement("img", { className: "w-[1440px] h-[1680px] object-cover", src: imageUrl }))),
React.createElement("div", { className: "relative h-auto w-full px-20 py-40 md:px-20-md md:py-40-md lg:p-[2.5rem] 2xl:p-40-2xl" },
React.createElement("div", { className: "mb-0 lg:mb-[1.875rem] 2xl:mb-[2.083vw] " },
React.createElement("span", { className: "text-body-text font-normal uppercase not-italic leading-[120%] tracking-[0.008em] text-graphite md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl " }, date)),
React.createElement("div", { className: "mb-[0.625rem] w-full md:mb-[1.302vw] lg:mb-[1.875rem] lg:w-[29.938rem] 2xl:mb-[2.083vw] 2xl:w-[37.708vw]" },
React.createElement("a", { href: handle },
React.createElement("h1", { className: "w-full text-left text-h3 leading-[120%] text-graphite md:text-h3-md lg:text-h3-lg 2xl:text-h3-2xl " }, title.slice(0, 60)))),
React.createElement("div", { className: " mb-[1.25rem] w-full md:mb-[2.604vw] lg:mb-[1.875rem] lg:w-[29.438rem] 2xl:mb-[2.083vw] 2xl:w-[34.931vw]" },
React.createElement("span", { className: " whitespace-normal text-left text-h5 font-normal leading-[120%] text-graphite md:text-h5-md lg:mb-[1.875rem] lg:text-h5-lg 2xl:text-h5-2xl" }, excerpt.slice(0, 180))),
React.createElement("div", { className: "mb-0 flex md:mb-[1.302vw] lg:mb-[1.875rem] 2xl:mb-[2.083vw] space-x-10 lg:space-x-10 2xl:space-x-10-2xl" }, tagName.map(function (val, index) { return (React.createElement("button", { "aria-label": "Button", className: " flex items-center justify-between rounded bg-white md:py-[1.042vw] md:px-[1.302vw] lg:py-[0.5rem] lg:px-[0.625rem] py-[0.5rem] px-[0.625rem] 2xl:px-[0.694vw] 2xl:py-[0.556vw]",
// onClick={onClick}
key: index },
React.createElement("span", {
// onClick={() => handleClick(label)}
className: " text-center text-caption uppercase text-graphite md:text-[1.563vw] lg:text-caption 2xl:text-caption-2xl" }, val.label))); })),
React.createElement(Button, { className: "hidden lg:block 2xl:block", label: "Read More", variants: "tertiary", onClick: function () {
("");
} })))));
};
export default BlogFeature;
//# sourceMappingURL=BlogFeature.js.map