kupos-ui-components-lib
Version:
A reusable UI components package
165 lines (164 loc) • 10.4 kB
JavaScript
import React from "react";
const ServiceListDesktop = (props) => {
const { services = [], onServiceSelect, onServiceView, colors = {}, showFilters = false, filters, onFilterChange, } = props;
const handleServiceSelect = (serviceId) => {
onServiceSelect && onServiceSelect(serviceId);
};
const handleServiceView = (serviceId) => {
onServiceView && onServiceView(serviceId);
};
return (React.createElement("div", { className: "service-list-desktop", style: {
backgroundColor: colors.backgroundColor || "#f8f9fa",
padding: "20px",
borderRadius: "8px",
} },
React.createElement("h2", { style: {
color: colors.primaryColor || "#333",
marginBottom: "20px",
} }, "Available Services"),
showFilters && (React.createElement("div", { className: "filters", style: {
marginBottom: "20px",
padding: "15px",
backgroundColor: colors.cardBackgroundColor || "#fff",
borderRadius: "8px",
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
} },
React.createElement("h3", { style: { marginBottom: "15px", fontSize: "16px" } }, "Filters"),
React.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "15px" } },
(filters === null || filters === void 0 ? void 0 : filters.categories) && (React.createElement("div", null,
React.createElement("label", { style: { display: "block", marginBottom: "5px" } }, "Categories"),
React.createElement("select", { style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
}, 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" } }, "Price Range"),
React.createElement("div", { style: { display: "flex", gap: "10px" } },
React.createElement("input", { type: "number", placeholder: "Min", style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
width: "80px",
}, 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",
width: "80px",
}, 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) }) })) })))),
(filters === null || filters === void 0 ? void 0 : filters.sortBy) && (React.createElement("div", null,
React.createElement("label", { style: { display: "block", marginBottom: "5px" } }, "Sort By"),
React.createElement("select", { style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
}, 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", null,
React.createElement("label", { style: { display: "block", marginBottom: "5px" } }, "Sort Order"),
React.createElement("select", { style: {
padding: "8px",
borderRadius: "4px",
border: "1px solid #ddd",
}, 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-grid", style: {
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
gap: "20px",
} }, 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",
} },
service.imageUrl && (React.createElement("div", { className: "service-image", style: {
height: "160px",
overflow: "hidden",
} },
React.createElement("img", { src: service.imageUrl, alt: service.name, style: {
width: "100%",
height: "100%",
objectFit: "cover",
} }))),
React.createElement("div", { style: { padding: "15px" } },
React.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
marginBottom: "10px",
} },
React.createElement("h3", { style: {
margin: 0,
color: colors.textColor || "#333",
fontSize: "18px",
} }, service.name),
service.rating !== undefined && (React.createElement("div", { style: {
backgroundColor: colors.primaryColor || "#007bff",
color: "#fff",
padding: "3px 8px",
borderRadius: "4px",
fontSize: "14px",
} },
service.rating.toFixed(1),
" \u2605"))),
service.description && (React.createElement("p", { style: {
color: colors.textColor || "#666",
fontSize: "14px",
marginBottom: "15px",
} }, service.description)),
React.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
} },
service.price !== undefined && (React.createElement("div", { style: {
fontSize: "18px",
fontWeight: "bold",
color: colors.primaryColor || "#007bff",
} },
service.currency || "$",
service.price.toFixed(2))),
React.createElement("div", { style: { display: "flex", gap: "10px" } },
React.createElement("button", { onClick: () => handleServiceView(service.id), style: {
backgroundColor: "transparent",
color: colors.secondaryColor || "#6c757d",
border: `1px solid ${colors.secondaryColor || "#6c757d"}`,
padding: "8px 12px",
borderRadius: "4px",
cursor: "pointer",
fontSize: "14px",
} }, "View"),
React.createElement("button", { onClick: () => handleServiceSelect(service.id), disabled: !service.available, style: {
backgroundColor: service.available
? colors.primaryColor || "#007bff"
: "#ccc",
color: "#fff",
border: "none",
padding: "8px 12px",
borderRadius: "4px",
cursor: service.available ? "pointer" : "not-allowed",
fontSize: "14px",
} }, service.available ? "Select" : "Unavailable")))))))) : (React.createElement("div", { style: {
gridColumn: "1 / -1",
textAlign: "center",
padding: "40px 0",
color: colors.textColor || "#666",
} }, "No services available")))));
};
export default ServiceListDesktop;