function DropdownFilterMenu({ title, options, onSelect }) { const [isOpen, setIsOpen] = React.useState(false); const [selectedOption, setSelectedOption] = React.useState(null); const handleSelect = (option)=>{ setSelectedOption(option); setIsOpen(false); onSelect(option); }; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-white rounded-lg cursor-pointer border border-gray-300", onClick: ()=>setIsOpen(!isOpen), __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("span", { className: isOpen ? "fa fa-chevron-up" : "fa fa-chevron-down", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this })), isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-full mt-1 w-full z-10", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 hover:bg-gray-200 cursor-pointer font-roboto text-[#121212]", onClick: ()=>handleSelect(option), __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, option)))), selectedOption && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, selectedOption))); } function DropdownFilterMenuStory() { const options = [ "Option 1", "Option 2", "Option 3" ]; const handleSelect = (option)=>{ console.log(option); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-10 space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DropdownFilterMenu, { title: "Dropdown Menu", options: options, onSelect: handleSelect, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DropdownFilterMenu, { title: "Another Menu", options: [ "Choice A", "Choice B", "Choice C" ], onSelect: (option)=>console.log(option), __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function MenuBar({ menuItems, bgColor, textColor, activeItem }) { return /*#__PURE__*/ React.createElement("nav", { className: `bg-[${bgColor}] shadow-md w-full`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, menuItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item, href: `#${item.toLowerCase().replace(/\s+/g, '-')}`, className: `mr-4 last:mr-0 font-roboto relative`, style: { color: activeItem === item ? '#000' : '#fff', transition: 'color 0.3s' }, __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, item, /*#__PURE__*/ React.createElement("span", { className: `absolute inset-x-0 bottom-0 h-1 bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-center ${activeItem === item ? 'scale-x-100' : ''}`, __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("a", { href: "#sign-up", className: "bg-yellow-400 text-black px-4 py-2 rounded-md font-semibold font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Sign Up")))); } function MenuBarStory() { const menuItems = [ "Insurance", "Compare Insurance", "About Us", "Industry News", "Glossary", "Blog" ]; const activeItem = "About Us"; const bgColor = "#4F46E5"; const textColor = "#E0E7FF"; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, ` .group-hover:scale-x-100:hover > span { transform: scale(1); } .group-hover:scale-x-100:hover > span:nth-child(2) { transform: scaleX(1); } a:hover > span { transform: scaleX(1) !important; } `), /*#__PURE__*/ React.createElement(MenuBar, { menuItems: menuItems, bgColor: bgColor, textColor: textColor, activeItem: activeItem, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function MainComponent() { const categoryOptions = [ "Auto Insurance", "Health Insurance", "Home Insurance" ]; const insurerOptions = [ "Insurer A", "Insurer B", "Insurer C" ]; const locationOptions = [ "New York", "California", "Texas" ]; const menuItems = [ "Insurance", "Compare Insurance", "About Us", "Industry News", "Glossary", "Blog" ]; const activeMenuItem = "Compare Insurance"; const bgColor = "#4F46E5"; const textColor = "#ffffff"; const [selectedCategory, setSelectedCategory] = React.useState(null); const [selectedInsurer, setSelectedInsurer] = React.useState(null); const [selectedLocation, setSelectedLocation] = React.useState(null); const clearFilters = ()=>{ setSelectedCategory(null); setSelectedInsurer(null); setSelectedLocation(null); }; const hasSelectedOptions = selectedCategory || selectedInsurer || selectedLocation; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#f4f7fa]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MenuBar, { menuItems: menuItems, bgColor: bgColor, textColor: textColor, activeItem: activeMenuItem, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto py-6 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Compare Insurance"), /*#__PURE__*/ React.createElement("section", { "aria-labelledby": "filter_section", className: "mt-6", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow sm:rounded-md sm:overflow-hidden p-6", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(DropdownFilterMenu, { title: "Category", options: categoryOptions, onSelect: setSelectedCategory, __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(DropdownFilterMenu, { title: "Insurer", options: insurerOptions, onSelect: setSelectedInsurer, __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(DropdownFilterMenu, { title: "Location", options: locationOptions, onSelect: setSelectedLocation, __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:underline focus:outline-none font-roboto", onClick: clearFilters, __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, "Clear filters")))), /*#__PURE__*/ React.createElement("section", { className: "mt-6", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow sm:rounded-md p-6", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold font-roboto text-gray-900", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Differences"), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, !hasSelectedOptions && /*#__PURE__*/ React.createElement("div", { className: "text-center py-10", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-900", __source: { fileName: "", lineNumber: 63, columnNumber: 21 }, __self: this }, "No policies selected yet. Please use the filters on the left to narrow down policy options and then select two policies from the drop-down above.")))))))); }