kupos-ui-components-lib
Version:
A reusable UI components package
196 lines (195 loc) • 12.1 kB
JavaScript
import React, { useState } from "react";
const ServiceListMobile = (props) => {
const { services = [], onServiceSelect, onServiceView, colors = {}, showFilters = false, filters, onFilterChange, } = props;
const [showFilterPanel, setShowFilterPanel] = useState(false);
const handleServiceSelect = (serviceId) => {
onServiceSelect && onServiceSelect(serviceId);
};
const handleServiceView = (serviceId) => {
onServiceView && onServiceView(serviceId);
};
return (React.createElement("div", { className: "service-list-mobile", style: {
backgroundColor: colors.backgroundColor || "#f8f9fa",
padding: "15px",
borderRadius: "8px",
} },
React.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "15px",
} },
React.createElement("h2", { style: {
color: colors.primaryColor || "#333",
margin: 0,
fontSize: "20px",
} }, "Available Services"),
showFilters && (React.createElement("button", { onClick: () => setShowFilterPanel(!showFilterPanel), style: {
backgroundColor: colors.secondaryColor || "#6c757d",
color: "#fff",
border: "none",
padding: "6px 12px",
borderRadius: "4px",
fontSize: "14px",
cursor: "pointer",
} }, showFilterPanel ? "Hide Filters" : "Show Filters"))),
showFilters && showFilterPanel && (React.createElement("div", { className: "filters", style: {
marginBottom: "15px",
padding: "12px",
backgroundColor: colors.cardBackgroundColor || "#fff",
borderRadius: "8px",
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
} },
React.createElement("h3", { style: { marginBottom: "12px", fontSize: "16px" } }, "Filters"),
React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "12px" } },
(filters === null || filters === void 0 ? void 0 : filters.categories) && (React.createElement("div", null,
React.createElement("label", { style: { display: "block", marginBottom: "5px", fontSize: "14px" } }, "Categories"),
React.createElement("select", { style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
width: "100%",
}, onChange: (e) => onFilterChange &&
onFilterChange(Object.assign(Object.assign({}, filters), { categories: [e.target.value] })) },
React.createElement("option", { value: "" }, "All Categories"),
filters.categories.map((category) => (React.createElement("option", { key: category, value: category }, category)))))),
(filters === null || filters === void 0 ? void 0 : filters.priceRange) && (React.createElement("div", null,
React.createElement("label", { style: { display: "block", marginBottom: "5px", fontSize: "14px" } }, "Price Range"),
React.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } },
React.createElement("input", { type: "number", placeholder: "Min", style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
flex: 1,
}, value: filters.priceRange.min, onChange: (e) => onFilterChange &&
onFilterChange(Object.assign(Object.assign({}, filters), { priceRange: Object.assign(Object.assign({}, filters.priceRange), { min: Number(e.target.value) }) })) }),
React.createElement("span", null, "to"),
React.createElement("input", { type: "number", placeholder: "Max", style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
flex: 1,
}, value: filters.priceRange.max, onChange: (e) => onFilterChange &&
onFilterChange(Object.assign(Object.assign({}, filters), { priceRange: Object.assign(Object.assign({}, filters.priceRange), { max: Number(e.target.value) }) })) })))),
React.createElement("div", { style: { display: "flex", gap: "10px" } },
(filters === null || filters === void 0 ? void 0 : filters.sortBy) && (React.createElement("div", { style: { flex: 1 } },
React.createElement("label", { style: { display: "block", marginBottom: "5px", fontSize: "14px" } }, "Sort By"),
React.createElement("select", { style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
width: "100%",
}, value: filters.sortBy, onChange: (e) => onFilterChange &&
onFilterChange(Object.assign(Object.assign({}, filters), { sortBy: e.target.value })) },
React.createElement("option", { value: "price" }, "Price"),
React.createElement("option", { value: "rating" }, "Rating"),
React.createElement("option", { value: "name" }, "Name")))),
(filters === null || filters === void 0 ? void 0 : filters.sortOrder) && (React.createElement("div", { style: { flex: 1 } },
React.createElement("label", { style: { display: "block", marginBottom: "5px", fontSize: "14px" } }, "Sort Order"),
React.createElement("select", { style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
width: "100%",
}, value: filters.sortOrder, onChange: (e) => onFilterChange &&
onFilterChange(Object.assign(Object.assign({}, filters), { sortOrder: e.target.value })) },
React.createElement("option", { value: "asc" }, "Ascending"),
React.createElement("option", { value: "desc" }, "Descending")))))))),
React.createElement("div", { className: "services-list", style: {
display: "flex",
flexDirection: "column",
gap: "15px",
} }, services.length > 0 ? (services.map((service) => (React.createElement("div", { key: service.id, className: "service-card", style: {
backgroundColor: colors.cardBackgroundColor || "#fff",
borderRadius: "8px",
overflow: "hidden",
boxShadow: "0 2px 5px rgba(0,0,0,0.1)",
border: service.featured
? `2px solid ${colors.highlightColor || "#ffc107"}`
: "none",
} },
React.createElement("div", { style: { display: "flex" } },
service.imageUrl && (React.createElement("div", { className: "service-image", style: {
width: "100px",
height: "100px",
overflow: "hidden",
} },
React.createElement("img", { src: service.imageUrl, alt: service.name, style: {
width: "100%",
height: "100%",
objectFit: "cover",
} }))),
React.createElement("div", { style: { padding: "12px", flex: 1 } },
React.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
marginBottom: "8px",
} },
React.createElement("h3", { style: {
margin: 0,
color: colors.textColor || "#333",
fontSize: "16px",
} }, service.name),
service.rating !== undefined && (React.createElement("div", { style: {
backgroundColor: colors.primaryColor || "#007bff",
color: "#fff",
padding: "2px 6px",
borderRadius: "4px",
fontSize: "12px",
} },
service.rating.toFixed(1),
" \u2605"))),
service.description && (React.createElement("p", { style: {
color: colors.textColor || "#666",
fontSize: "13px",
marginBottom: "10px",
display: "-webkit-box",
WebkitLineClamp: 2,
WebkitBoxOrient: "vertical",
overflow: "hidden",
textOverflow: "ellipsis",
} }, service.description)),
React.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
} }, service.price !== undefined && (React.createElement("div", { style: {
fontSize: "16px",
fontWeight: "bold",
color: colors.primaryColor || "#007bff",
} },
service.currency || "$",
service.price.toFixed(2)))))),
React.createElement("div", { style: {
display: "flex",
borderTop: "1px solid #eee",
} },
React.createElement("button", { onClick: () => handleServiceView(service.id), style: {
flex: 1,
backgroundColor: "transparent",
color: colors.secondaryColor || "#6c757d",
border: "none",
borderRight: "1px solid #eee",
padding: "10px",
cursor: "pointer",
fontSize: "14px",
} }, "View"),
React.createElement("button", { onClick: () => handleServiceSelect(service.id), disabled: !service.available, style: {
flex: 1,
backgroundColor: "transparent",
color: service.available
? colors.primaryColor || "#007bff"
: "#ccc",
border: "none",
padding: "10px",
cursor: service.available ? "pointer" : "not-allowed",
fontSize: "14px",
fontWeight: "bold",
} }, service.available ? "Select" : "Unavailable")))))) : (React.createElement("div", { style: {
textAlign: "center",
padding: "30px 0",
color: colors.textColor || "#666",
} }, "No services available")))));
};
export default ServiceListMobile;