willba-component-library 0.0.3 → 0.0.5

package/dist/cjs/index.js

@@ -2828,12 +2828,112 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "button {\n  font-size: 70px;\n}";
-styleInject(css_248z);
+var css_248z$1 = "button {\n  font-size: 70px;\n}";
+styleInject(css_248z$1);
 
 const Button = (props) => {
     return React.createElement("button", null, props.label);
 };
 
+var css_248z = "/* Structure ---------------------------- */\r\n\r\n.root {\r\n  width: 100%;\r\n}\r\n\r\n.search-widget {\r\n  box-sizing: border-box;\r\n  max-width: 1100px;\r\n  position: relative;\r\n}\r\n\r\n.search-widget-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 10px 20px;\r\n  position: relative;\r\n  z-index: 222;\r\n  \r\n  border-radius: 40px;\r\n  background-color: #ecf1f4;\r\n  box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-container {\r\n  background-color: #ecf1f4;\r\n  min-height: 100px;\r\n \r\n  padding: 90px 40px 30px 40px;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 111;\r\n  border-radius: 40px;\r\n  width: -webkit-fill-available;\r\n  box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-divider {\r\n  width: 1px;\r\n  margin: 0 10px;\r\n  height: 35px;\r\n  background-color: #384265;\r\n}\r\n\r\n.search-widget-submit-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: #384265;\r\n  color: #fff;\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  border: none;\r\n}\r\n\r\n.search-widget-select-button {\r\n  width: auto;\r\n  height: auto;\r\n  background-color: transparent;\r\n  border: none;\r\n  padding: 10px 20px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n}\r\n\r\n/* Filters - Guests ---------------------------- */\r\n\r\n.search-widget-guests {\r\n  text-align: initial;\r\n}\r\n\r\n.guests-filter-container {\r\n  display: flex;\r\n  margin-top: 30px;\r\n}\r\n\r\n.guests-filter-inner {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.guests-filter-inner:not(:last-child) {\r\n  margin-right: 50px;\r\n}\r\n\r\n.guests-filter-inner > span {\r\n  display: block;\r\n  margin-right: 20px;\r\n  font-weight: bold;\r\n}\r\n\r\n.guests-filter-inner > div {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.guests-filter-inner > div > span {\r\n  margin: 0 10px;\r\n}\r\n\r\n.guests-filter-inner > div button {\r\n  border-radius: 50%;\r\n  border: none;\r\n  background-color: #CDEEFF;\r\n  width: 25px;\r\n  height: 25px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 20px;\r\n}\r\n\r\n/* Filters - Categories ---------------------------- */\r\n\r\n.search-widget-categories {\r\n  text-align: center;\r\n}\r\n\r\n.categories-filter-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 20px;\r\n}\r\n\r\n.categories-filter-inner input {\r\n  cursor: pointer;\r\n  margin-right: 10px;\r\n}\r\n\r\n";
+styleInject(css_248z);
+
+function FilterBar() {
+    const [selectedFilter, setSelectedFilter] = reactExports.useState(false);
+    // const [startDate, setStartDate] = useState(0);
+    // const [endDate, setEndDate] = useState(0);
+    const [guestsAdults, setGuestsAdults] = reactExports.useState(0);
+    const [guestsKids, setGuestsKids] = reactExports.useState(0);
+    const [categories, setCategories] = reactExports.useState(0);
+    const handleSelectedFilter = (id) => {
+        setSelectedFilter(id);
+    };
+    const handleSubmit = () => {
+        const queryParams = new URLSearchParams();
+        const params = {
+            // startDate,
+            // endDate,
+            guestsAdults,
+            guestsKids,
+            categories,
+        };
+        for (const [key, value] of Object.entries(params)) {
+            if (value) {
+                queryParams.append(key, value.toString());
+            }
+        }
+        const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;
+        window.location.href = url;
+        handleSelectedFilter(false);
+    };
+    return (React.createElement("div", { className: "search-widget" },
+        React.createElement("div", { className: "search-widget-header" },
+            React.createElement(SelectButton, { label: "Start date", onClick: () => handleSelectedFilter(1) }),
+            React.createElement(Divider, null),
+            React.createElement(SelectButton, { label: "End date", onClick: () => handleSelectedFilter(2) }),
+            React.createElement(Divider, null),
+            React.createElement(SelectButton, { label: "Guests", onClick: () => handleSelectedFilter(3) }),
+            React.createElement(Divider, null),
+            React.createElement(SelectButton, { label: "Categories", onClick: () => handleSelectedFilter(4) }),
+            React.createElement(SubmitButton, { onClick: handleSubmit })),
+        selectedFilter && (React.createElement("div", { className: "search-widget-container" },
+            selectedFilter === 1 && React.createElement(StartDate, null),
+            selectedFilter === 2 && React.createElement(EndDate, null),
+            selectedFilter === 3 && (React.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: () => setGuestsAdults(guestsAdults - 1), incrementAdults: () => setGuestsAdults(guestsAdults + 1), decrementKids: () => setGuestsKids(guestsKids - 1), incrementKids: () => setGuestsKids(guestsKids + 1) })),
+            selectedFilter === 4 && (React.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
+}
+const Divider = () => {
+    return React.createElement("div", { className: "search-widget-divider" });
+};
+const SubmitButton = ({ onClick }) => {
+    return (React.createElement("button", { className: "search-widget-submit-button", onClick: onClick }, "Apply filters"));
+};
+const SelectButton = ({ label, onClick }) => {
+    return (React.createElement("button", { className: "search-widget-select-button", onClick: onClick }, label));
+};
+const StartDate = () => {
+    return React.createElement("div", null, "Start date");
+};
+const EndDate = () => {
+    return React.createElement("div", null, "End date");
+};
+const Guests = ({ guestsAdults, guestsKids, decrementAdults, incrementAdults, decrementKids, incrementKids, }) => {
+    return (React.createElement("div", { className: "search-widget-guests" },
+        React.createElement("h3", null, "Guests"),
+        React.createElement("p", null, "Who's coming?"),
+        React.createElement("div", { className: "guests-filter-container" },
+            React.createElement("div", { className: "guests-filter-inner" },
+                React.createElement("span", null, "Adults"),
+                React.createElement("div", null,
+                    React.createElement("button", { onClick: decrementAdults, disabled: guestsAdults < 1 }, "-"),
+                    React.createElement("span", null, guestsAdults),
+                    React.createElement("button", { onClick: incrementAdults }, "+"))),
+            React.createElement("div", { className: "guests-filter-inner" },
+                React.createElement("span", null, "Kids"),
+                React.createElement("div", null,
+                    React.createElement("button", { onClick: decrementKids, disabled: guestsKids < 1 }, "-"),
+                    React.createElement("span", null, guestsKids),
+                    React.createElement("button", { onClick: incrementKids }, "+"))))));
+};
+const Categories = ({ categories, setCategories }) => {
+    const categoriesPlaceholder = [
+        "Weekend",
+        "Week",
+        "Summer camp",
+        "Winter camp",
+    ];
+    const [selectedCategory, setSelectedCategory] = reactExports.useState("");
+    const handleCategoryChange = (selectedCategory) => {
+        setSelectedCategory(selectedCategory);
+        setCategories(selectedCategory); // Update the parent component's state with the selected category
+    };
+    return (React.createElement("div", { className: "search-widget-categories" },
+        React.createElement("h3", null, "CATEGORY"),
+        React.createElement("div", { className: "categories-filter-inner" }, categoriesPlaceholder.map((itm, idx) => (React.createElement("div", { key: idx },
+            React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: () => handleCategoryChange(itm) }),
+            React.createElement("span", null, itm)))))));
+};
+
 exports.Button = Button;
+exports.FilterBar = FilterBar;
 //# sourceMappingURL=index.js.map