kupos-service-item-package
Version:
A reusable service item component
34 lines (33 loc) • 2.16 kB
JavaScript
import React from "react";
// Mobile-only view. Implement your mobile UI here.
// You will receive the same props as the desktop variant plus optional mobile overrides:
// - mobileServiceItem, mobileColors, mobileTranslation
// You can choose which data to render (e.g., prefer mobile* overrides when present).
const ServiceItemMobileView = props => {
const { mobileServiceItem, mobileColors, mobileTranslation, } = props;
// Choose the data source for mobile (override if provided)
const data = mobileServiceItem;
const palette = mobileColors;
const i18n = mobileTranslation;
return (React.createElement("div", { className: "bg-white rounded-[16px] p-4 shadow-service" },
React.createElement("div", { className: "text-[#464647] text-[14px]" },
React.createElement("div", { className: "font-semibold mb-2" }, "Mobile Service Item"),
React.createElement("div", { className: "mb-1" },
"Operator: ", data === null || data === void 0 ? void 0 :
data.operator_service_name),
React.createElement("div", { className: "mb-1" },
"Departure: ", data === null || data === void 0 ? void 0 :
data.dep_time),
React.createElement("div", { className: "mb-1" },
"Arrival: ", data === null || data === void 0 ? void 0 :
data.arr_time),
typeof (data === null || data === void 0 ? void 0 : data.available_seats) === "number" && (React.createElement("div", { className: "mb-1" },
"Available seats: ",
data.available_seats)),
(i18n === null || i18n === void 0 ? void 0 : i18n.hours) && (React.createElement("div", { className: "text-[12px] text-[#888]" }, data === null || data === void 0 ? void 0 :
data.duration,
" ",
i18n.hours))),
(palette === null || palette === void 0 ? void 0 : palette.buttonColor) && (React.createElement("div", { className: "mt-3 text-[12px]", style: { color: palette.buttonColor } }, "Colors and other theming can go here"))));
};
export default ServiceItemMobileView;