hh-ui-components
Version:
62 lines • 7.43 kB
JavaScript
import React from "react";
import { Button } from "../Button";
import { Capitalize } from "./Capitalize";
export var Quality = function (_a) {
var _b, _c, _d, _e, _f, _g, _h;
var traceability_title = _a.traceability_title, product_province = _a.product_province, product_sourced_from = _a.product_sourced_from, product_cashmere = _a.product_cashmere, product_from = _a.product_from, product_and = _a.product_and, product_goats = _a.product_goats, footer_learnMore = _a.footer_learnMore, product_process = _a.product_process, traceData = _a.traceData, onClick = _a.onClick;
var cashmere = (_c = (_b = traceData === null || traceData === void 0 ? void 0 : traceData.materialBlend) === null || _b === void 0 ? void 0 : _b.split("/")[0]) === null || _c === void 0 ? void 0 : _c.split(" ");
var silk = (_e = (_d = traceData === null || traceData === void 0 ? void 0 : traceData.materialBlend) === null || _d === void 0 ? void 0 : _d.split("/")[1]) === null || _e === void 0 ? void 0 : _e.split(" ");
var process = (_g = (_f = traceData === null || traceData === void 0 ? void 0 : traceData.produceProcess) === null || _f === void 0 ? void 0 : _f.replaceAll("FACTORY", "")) === null || _g === void 0 ? void 0 : _g.split(",");
return (React.createElement("div", null,
React.createElement("h3", { className: "tw-container pb-[40px] 2xl:pb-[2.778vw]" }, traceability_title),
React.createElement("div", { className: "grid grid-cols-2 grid-rows-3 lg:grid-rows-1 lg:grid-cols-6" },
React.createElement("div", { className: "relative" },
React.createElement("div", { className: "bg-graphite" },
React.createElement("img", { height: 1920, width: 1440, className: "opacity-[0.8]", src: "https://cdn.shopify.com/s/files/1/1953/2845/files/1_d3ae49b6-cb46-4db5-b063-b068b116428b.jpg?v=1657001887", alt: "province" })),
traceData ? (React.createElement("div", { className: "absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center" },
React.createElement("p", { className: "text-white text-12-12" }, product_sourced_from),
React.createElement("h5", { className: "text-white" },
traceData && (traceData === null || traceData === void 0 ? void 0 : traceData.orignProvince),
" ",
product_province))) : ("")),
React.createElement("div", { className: "bg-[#CBC9BC] relative" },
React.createElement("div", { className: "absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center" },
React.createElement("div", { className: "flex items-center flex-wrap min-w-[134px] justify-center gap-x-2" },
React.createElement("h5", null, product_cashmere),
React.createElement("h5", null, product_from),
React.createElement("a", null),
React.createElement("h5", null, product_and),
React.createElement("a", null),
React.createElement("h5", null, product_goats)),
React.createElement("div", { className: "mx-[25%]" },
React.createElement(Button, { className: "mt-[2.5rem] 2xl:mt-[2.778vw]", variants: "tertiary", label: footer_learnMore, onClick: onClick })))),
React.createElement("div", { className: "bg-quaternary relative" }, ((_h = traceData === null || traceData === void 0 ? void 0 : traceData.materialBlend) === null || _h === void 0 ? void 0 : _h.split("/").length) > 1 ? (React.createElement("div", null,
React.createElement("div", { className: "absolute top-[25%] left-[50%] translate-x-[-50%] translate-y-[-50%]" },
React.createElement("h3", { className: "text-graphite text-center " }, cashmere && cashmere[0]),
React.createElement("p", { className: "text-graphite text-body-large md:text-body-large-md lg:text-body-large 2xl:text-[0.972vw] text-center" }, product_cashmere.toUpperCase())),
React.createElement("div", { className: "border border-black w-full absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]" }),
React.createElement("div", { className: "absolute top-[75%] left-[50%] translate-x-[-50%] translate-y-[-50%]" },
React.createElement("h3", { className: "text-graphite text-center " }, silk && silk[0]),
React.createElement("p", { className: "text-graphite text-body-large md:text-body-large-md lg:text-body-large 2xl:text-[0.972vw] text-center" }, silk && silk[1].toUpperCase())))) : (React.createElement("div", { className: "absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center" },
React.createElement("h3", { className: "text-graphite" }, cashmere && cashmere[0]),
React.createElement("p", { className: "text-graphite text-body-large md:text-body-large-md lg:text-body-large 2xl:text-[0.972vw]" }, product_cashmere.toUpperCase())))),
React.createElement("div", { className: "bg-secondary relative" },
React.createElement("div", { className: "bg-graphite" },
React.createElement("img", { height: 1920, width: 1440, className: "opacity-[0.8]", src: "https://cdn.shopify.com/s/files/1/1953/2845/files/3_4f36a1cc-ddf1-40de-bda0-b8c3bef03b52.jpg?v=1657001887", alt: "province" })),
React.createElement("div", { className: "absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] text-center" }, (traceData === null || traceData === void 0 ? void 0 : traceData.gauge) && (React.createElement("p", { className: "text-14-16 text-white" }, traceData === null || traceData === void 0 ? void 0 : traceData.gauge)))),
React.createElement("div", { className: "bg-secondary text-graphite p-[1.25rem] lg:p-[1.875rem] 2xl:p-[2.083vw]" },
React.createElement("p", { className: "text-12-12" }, product_process),
process && (React.createElement("ul", { className: "mt-[1.25rem] 2xl:mt-[1.389vw]" }, process.map(function (z, index) {
var _a;
return (React.createElement("div", { className: "flex items-center gap-x-2", key: index },
React.createElement("div", { className: "w-[18px] h-[18px] 2xl:w-[1.250vw] 2xl:h-[1.250vw] rounded-full text-center border border-black" },
React.createElement("p", { className: "text-[14px] 2xl:text-[0.972vw] leading-[120%]" }, index + 1)),
React.createElement(Button, { className: "text-h5 md:text-h5-md lg:text-h5-lg 2xl:text-h5-2xl hover:!text-graphite before:!bg-graphite items-start", variants: "hoverUnderline", onClick: onClick, label: ((_a = z.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replaceAll(" ", "")) === "spining"
? "Spinning"
: Capitalize(z) })));
})))),
React.createElement("div", null,
React.createElement("img", { height: 1920, width: 1440, src: "https://cdn.shopify.com/s/files/1/1953/2845/files/2_eff61436-23e6-4257-9f5d-375c893f7037.jpg?v=1657001887", alt: "province" })))));
};
export default Quality;
//# sourceMappingURL=Quality.js.map