willba-component-library 0.0.8 → 0.0.10

package/dist/cjs/types/components/FilterBar/FilterBar.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
-import "./FilterBar.css";
+import React from 'react';
 export default function FilterBar(): React.JSX.Element;

package/dist/esm/index.js

@@ -2512,111 +2512,133 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = "button {\n  font-size: 70px;\n}";
-styleInject(css_248z$1);
+var css_248z = "button {\n  font-size: 70px;\n}";
+styleInject(css_248z);
 
 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 [selectedFilter, setSelectedFilter] = useState<number | boolean>(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);
-    };
+    //const [guestsAdults, setGuestsAdults] = useState(0)
+    //const [guestsKids, setGuestsKids] = useState(0)
+    //const [categories, setCategories] = useState(0)
+    // const handleSelectedFilter = (id: any) => {
+    //   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 }))))));
+            React.createElement(Divider, null))));
 }
 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)))))));
-};
+// const SubmitButton = ({ onClick }: any) => {
+//   return (
+//     <button className="search-widget-submit-button" onClick={onClick}>
+//       Apply filters
+//     </button>
+//   )
+// }
+// const SelectButton = ({ label, onClick }: any) => {
+//   return (
+//     <button className="search-widget-select-button" onClick={onClick}>
+//       {label}
+//     </button>
+//   )
+// }
+// const StartDate = () => {
+//   return <div>Start date</div>
+// }
+// const EndDate = () => {
+//   return <div>End date</div>
+// }
+// const Guests = ({
+//   guestsAdults,
+//   guestsKids,
+//   decrementAdults,
+//   incrementAdults,
+//   decrementKids,
+//   incrementKids,
+// }: any) => {
+//   return (
+//     <div className="search-widget-guests">
+//       <h3>Guests</h3>
+//       <p>Who's coming?</p>
+//       <div className="guests-filter-container">
+//         <div className="guests-filter-inner">
+//           <span>Adults</span>
+//           <div>
+//             <button onClick={decrementAdults} disabled={guestsAdults < 1}>
+//               -
+//             </button>
+//             <span>{guestsAdults}</span>
+//             <button onClick={incrementAdults}>+</button>
+//           </div>
+//         </div>
+//         <div className="guests-filter-inner">
+//           <span>Kids</span>
+//           <div>
+//             <button onClick={decrementKids} disabled={guestsKids < 1}>
+//               -
+//             </button>
+//             <span>{guestsKids}</span>
+//             <button onClick={incrementKids}>+</button>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   )
+// }
+// const Categories = ({ categories, setCategories }: any) => {
+//   const categoriesPlaceholder = ['Weekend', 'Week', 'Summer camp', 'Winter camp']
+//   const [selectedCategory, setSelectedCategory] = useState('')
+//   const handleCategoryChange = (selectedCategory: any) => {
+//     setSelectedCategory(selectedCategory)
+//     setCategories(selectedCategory) // Update the parent component's state with the selected category
+//   }
+//   return (
+//     <div className="search-widget-categories">
+//       <h3>CATEGORY</h3>
+//       <div className="categories-filter-inner">
+//         {categoriesPlaceholder.map((itm, idx) => (
+//           <div key={idx}>
+//             <input
+//               type="radio"
+//               value={itm}
+//               checked={selectedCategory === itm}
+//               onChange={() => handleCategoryChange(itm)}
+//             />
+//             <span>{itm}</span>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//   )
+// }
 
 export { Button, FilterBar };
 //# sourceMappingURL=index.js.map