hh-ui-components
Version:
23 lines • 2.41 kB
JavaScript
import React from "react";
export var BlogSingle = function (_a) {
var title = _a.title, tagName = _a.tagName, date = _a.date, imageUrl = _a.imageUrl, handle = _a.handle;
return (React.createElement("div", { className: "relative bg-primary mb-40 w-full md:mb-60-md lg:mb-60 2xl:mb-60-2xl" },
React.createElement("div", { className: "relative w-full cursor-pointer" },
React.createElement("a", { href: handle },
React.createElement("div", { className: "group block" },
React.createElement("img", { className: "w-fit h-[480px] object-cover", src: imageUrl })))),
React.createElement("div", { className: "lg:px-20-lg lg:pt-20-lg relative px-10 pt-10 lg:h-[9.438rem] 2xl:h-[10.486vw] 2xl:px-20-2xl 2xl:pt-20-2xl" },
React.createElement("div", { className: "items-center justify-between lg:flex" },
React.createElement("div", { className: "w-full" },
React.createElement("div", { className: " mb-10 md:mb-10-md lg:mb-10 2xl:mb-10-2xl" },
React.createElement("span", { className: "text-caption tracking-[0.08em] text-graphite md:text-[1.563vw] lg:text-caption 2xl:text-caption-2xl uppercase" }, date)),
React.createElement("a", { href: handle },
React.createElement("h2", { className: "cursor-pointer whitespace-normal text-h5 font-normal capitalize not-italic leading-[120%] text-graphite md:text-[2.344vw] lg:text-[1.5rem] 2xl:text-h5-2xl" }, title.slice(0, 60))),
React.createElement("div", { className: "mt-[0.625rem] flex md:mt-[1.302vw] lg:mt-[0.625rem] 2xl:mt-[0.694vw] " }, tagName.map(function (val, index) { return (React.createElement("button", { "aria-label": "Button", className: " flex items-center mr-[10px] 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))); })))))));
};
//# sourceMappingURL=BlogSingle.js.map