function SearchHeaderWithCategories({ searchTerm, onSearchChange, category, onCategoryChange, onLayoutClick, children }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-black text-white min-h-screen p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search for apps...", className: "w-[200px] p-2 rounded bg-gray-800 text-white", name: "search", value: searchTerm, onChange: (e)=>onSearchChange(e.target.value), __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center p-2 rounded bg-blue-600", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, category), /*#__PURE__*/ React.createElement("div", { className: "absolute mt-2 p-2 bg-gray-800 rounded shadow-lg", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { onClick: ()=>onCategoryChange("Apps"), href: "#", className: "block px-4 py-2 text-white hover:bg-gray-700", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, "Apps"), /*#__PURE__*/ React.createElement("a", { onClick: ()=>onCategoryChange("Tools"), href: "#", className: "block px-4 py-2 text-white hover:bg-gray-700", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Tools"), /*#__PURE__*/ React.createElement("a", { onClick: ()=>onCategoryChange("Others"), href: "#", className: "block px-4 py-2 text-white hover:bg-gray-700", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this }, "Others")))), /*#__PURE__*/ React.createElement("button", { className: "p-2 rounded bg-blue-600", onClick: onLayoutClick, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Layout")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, children)); } function SearchHeaderWithCategoriesStory() { const [searchTerm, setSearchTerm] = React.useState(""); const [category, setCategory] = React.useState("All Categories"); function handleSearchChange(value) { setSearchTerm(value); } function handleCategoryChange(category) { setCategory(category); } function handleLayoutClick() { alert("Layout button clicked!"); } return /*#__PURE__*/ React.createElement(SearchHeaderWithCategories, { searchTerm: searchTerm, onSearchChange: handleSearchChange, category: category, onCategoryChange: handleCategoryChange, onLayoutClick: handleLayoutClick, __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Here are the search results based on the current state.")); } function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [category, setCategory] = React.useState("All Categories"); const handleSearchChange = (value)=>{ setSearchTerm(value); }; const handleCategoryChange = (newCategory)=>{ setCategory(newCategory); }; const handleLayoutClick = ()=>{ alert("Layout button clicked!"); }; const renderContent = ()=>{ if (category === "All Categories" || category === "Apps") { return [ /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/image1.jpg", alt: "Scarlet app icon", className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Scarlet"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Version 1.0 (idk) ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 29, columnNumber: 62 }, __self: this }, "💀")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "3rd Party Sign App"))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-600 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Install")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/image2.jpg", alt: "Code App icon", className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Code App"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Version 1.8.1 (292)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Expires in 89 days"))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-600 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Install")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/image3.jpg", alt: "SHARK VIP VNG app icon", className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "SHARK VIP VNG"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Version 2.1 (18720)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Expires in 89 days"))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-600 rounded", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Install")) ]; } if (category === "Tools") { return [ /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/image4.jpg", alt: "BETA PUBG MOBILE app icon", className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "BETA PUBG MOBILE"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Version 3.3.2 (18810)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Expires in 87 days"))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-600 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Open")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/image5.jpg", alt: "Dropbox: Files & Photo Storage app icon", className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Dropbox: Files & Photo Storage"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Version 383.1 (383.1.2)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Expires in 82 days"))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-600 rounded", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Install")) ]; } if (category === "Others") { return [ /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-800 rounded flex justify-between items-center", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path/to/image6.jpg", alt: "Groq - Fastest Chat Ai Bot app icon", className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, "Groq - Fastest Chat Ai Bot"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Version 1.0.0 (1)"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Expires in 41 days"))), /*#__PURE__*/ React.createElement("button", { className: "py-2 px-4 bg-blue-600 rounded", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Open")) ]; } }; return /*#__PURE__*/ React.createElement(SearchHeaderWithCategories, { searchTerm: searchTerm, onSearchChange: handleSearchChange, category: category, onCategoryChange: handleCategoryChange, onLayoutClick: handleLayoutClick, __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, renderContent()); }