hh-ui-components
Version:
61 lines • 3.07 kB
JavaScript
import React from "react";
import classNames from "classnames";
import Tag from "../Tag";
import Wishlist from "./Wishlist";
import QuickBuy from "./QuickBuy";
import Title from "./Title";
import Color from "./Color";
export var SingleProduct = function (_a) {
var color = _a.color, _b = _a.variants, variants = _b === void 0 ? "collection" : _b, active = _a.active, className = _a.className, handle = _a.handle, onClick = _a.onClick, isWhite = _a.isWhite;
var classes = classNames({
"": true,
"w-[14px] h-[14px] 2xl:w-[0.972vw] 2xl:h-[0.972vw]": variants === "collection",
"w-[18px] h-[18px] 2xl:w-[1.250vw] 2xl:h-[1.250vw]": variants === "product"
});
var styles = {
popup: {
backgroundColor: color,
border: isWhite ? "1px solid #B8B8B8" : "none"
}
};
var parsedSizes = {
sizes: [
{ id: "1", value: "XS" },
{ id: "2", value: "S" },
{ id: "3", value: "L" },
{ id: "4", value: "XL" },
{ id: "5", value: "2XL" },
]
};
var allColor = [
{
color: "#BC2E3E",
label: "red"
},
{
color: "#B28282",
label: "ash rose"
},
{
color: "#CDC3D3",
label: "orchid hush"
},
{
color: "#000000",
label: "black"
},
];
return (React.createElement("div", { className: "relative mb-[1px] w-full" },
React.createElement("div", { className: "absolute left-10 top-10 z-10 2xl:left-[0.694vw] 2xl:top-[0.694vw]" },
React.createElement(Tag, { label: "-30%", color: "#E1FF4D" })),
React.createElement("div", { className: "relative w-full" },
React.createElement("div", { className: "group flex" },
React.createElement("img", { className: "w-[444px] h-[592px]", src: "https://cdn.shopify.com/s/files/1/0282/0718/5965/files/banner-1_c495ca86-af3a-4a47-a205-88ecbd58b3f7.jpg?v=1669706894" }),
React.createElement(Wishlist, { id: "", variant: "", productInfo: null, insights: "", className: "absolute right-[17px] top-[17px] z-10 lg:hidden lg:group-hover:block 2xl:right-[1.181vw] 2xl:top-[1.181vw]" }),
React.createElement(QuickBuy, { parsed_sizes: parsedSizes, variants: "", tags: "", productInfo: "", insights: "" }))),
React.createElement("div", { className: "relative px-10 md:px-10-md lg:px-20 2xl:px-20-2xl pt-10 2xl:pt-[0.694vw]" },
React.createElement(Title, { title: "Organic Colour Classic Hoodie", price: "€ 195.30", compPrice: "€ 279.00", currency: "", handle: handle, isActive: true, insights: "", productInfo: "" }),
React.createElement("div", { className: "mt-[4px] flex items-center justify-between md:mt-[0.521vw] lg:mt-[8px] 2xl:mt-[0.556vw]" },
React.createElement(Color, { colors: allColor, color: "red", setDetail: "", handle: handle, collectionHandle: "" })))));
};
//# sourceMappingURL=SingleProduct.js.map