kupos-ui-components-lib 8.0.6 → 8.0.7

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -413,12 +413,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                     (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
                 React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
-                    React.createElement("div", { className: "grid items-center gap-[12px] flex-1", style: {
-                            gridTemplateColumns: otherItems
-                                .map((i) => i.width)
-                                .join(" "),
-                        } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
-                    React.createElement("div", { className: "flex items-center ml-[12px] shrink-0" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
+                    React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
+                            gridTemplateColumns: "30% 18% 23% 23%",
+                            // otherItems
+                            //   .map((i) => i.width)
+                            //   .join(" "),
+                        } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
+                    React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
         children,
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: `  text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
                 backgroundColor: isSoldOut

package/dist/styles.css

@@ -327,6 +327,9 @@
 .w-\[120px\] {
   width: 120px;
 }
+.w-\[130px\] {
+  width: 130px;
+}
 .w-\[188px\] {
   width: 188px;
 }
@@ -419,6 +422,9 @@
 .justify-end {
   justify-content: flex-end;
 }
+.gap-\[2\%\] {
+  gap: 2%;
+}
 .gap-\[2px\] {
   gap: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "8.0.6",
+  "version": "8.0.7",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -819,25 +819,53 @@ function ServiceItemPB({
                 </div>
               ) : null}
 
+              {/* <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[10px]">
+                <div
+                  className="grid items-center gap-[12px] w-full"
+                  style={{
+                    gridTemplateColumns: "30% 20% 20% 20% auto",
+                  }}
+                >
+                  {items
+                    .sort((a, b) =>
+                      a.key === "amenities"
+                        ? 1
+                        : b.key === "amenities"
+                          ? -1
+                          : 0,
+                    )
+                    .map((item) => (
+                      <div key={item.key} className="flex items-center">
+                        {item.condition === false ? (
+                          <div style={{ minHeight: "20px", width: "100%" }} />
+                        ) : (
+                          item.render
+                        )}
+                      </div>
+                    ))}
+                </div>
+              </div> */}
+
               <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[10px]">
                 {/* 🔹 LEFT SIDE (GRID ITEMS) */}
                 <div
-                  className="grid items-center gap-[12px] flex-1"
+                  className="grid items-center gap-[2%] flex-1"
                   style={{
-                    gridTemplateColumns: otherItems
-                      .map((i) => i.width)
-                      .join(" "),
+                    gridTemplateColumns: "30% 18% 23% 23%",
+                    // otherItems
+                    //   .map((i) => i.width)
+                    //   .join(" "),
                   }}
                 >
                   {otherItems.map((item) => (
-                    <div key={item.key} className="flex items-center">
+                    <div key={item.key} className="flex items-center ">
                       {item.render}
                     </div>
                   ))}
                 </div>
 
                 {/* 🔹 RIGHT SIDE (ALWAYS END) */}
-                <div className="flex items-center ml-[12px] shrink-0">
+                <div className="flex items-center ml-[12px] shrink-0 w-[130px] justify-end">
                   {amenitiesItem?.render}
                 </div>
               </div>