function PasswordInputStyle({ placeholder = "Password", name }) { return /*#__PURE__*/ React.createElement("input", { type: "password", name: name, placeholder: placeholder, className: "w-full px-4 py-2 mb-6 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function PasswordInputStyleStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PasswordInputStyle, { name: "password", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [isSigningIn, setIsSigningIn] = React.useState(true); const products = [ { id: 1, name: "Compact White Headphones", description: "Crisp sound, perfect for on the go listening.", price: "$99.99", image: "/product-image-1.png", status: "available", type: "airbuds" }, { id: 2, name: "Ergonomic Wireless Mouse", description: "Comfortable design, built for precision.", price: "$29.99", image: "/product-image-2.png", status: "available", type: "others" }, { id: 3, name: "Sleek Black Smartwatch", description: "Stay connected, healthy, and active.", price: "$199.99", image: "/product-image-3.png", status: "available", type: "smartwatch" }, { id: 4, name: "Next-Gen VR Headset", description: "Immersive experience with high resolution display.", price: "Coming Soon", image: "/product-image-4.png", status: "coming_soon", type: "others" }, { id: 5, name: "Advanced Fitness Tracker", description: "Monitor your health and activity with precision.", price: "Coming Soon", image: "/product-image-5.png", status: "coming_soon", type: "smartwatch" } ]; const filteredProducts = products.filter((product)=>product.name.toLowerCase().includes(searchTerm.toLowerCase()) && (product.type === "smartwatch" || product.type === "airbuds")); function toggleAuthState() { setIsAuthenticated(!isAuthenticated); } function switchAuthForm() { setIsSigningIn(!isSigningIn); } if (!isAuthenticated) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800 mb-8 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, isSigningIn ? "Sign In" : "Create Account"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, !isSigningIn && /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", className: "w-full px-4 py-2 mb-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Email", className: "w-full px-4 py-2 mb-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(PasswordInputStyle, { name: "password", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: toggleAuthState, className: "w-full px-4 py-2 bg-blue-500 text-white font-roboto hover:bg-blue-700 transition duration-150 ease-in-out rounded-md", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("button", { onClick: switchAuthForm, className: "mt-4 text-blue-500 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, isSigningIn ? "Need an account? Sign up" : "Already have an account? Sign in")); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-8 p-8 bg-gray-100", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full max-w-md", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search smart watches & airbuds...", className: "w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", onChange: (event)=>setSearchTerm(event.target.value), __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-4 text-blue-500 font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user", __source: { fileName: "", lineNumber: 91, columnNumber: 60 }, __self: this }), " Profile")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-8", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, filteredProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "w-full max-w-sm p-6 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `${product.name} product image`, className: "w-full h-64 object-cover rounded-t-md", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "mt-4 text-lg text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-2", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, product.description), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, product.status === "available" ? /*#__PURE__*/ React.createElement("span", { className: "text-lg font-semibold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 49 }, __self: this }, product.price) : /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 rounded-lg bg-orange-500 text-white font-roboto hover:bg-orange-700 transition duration-150 ease-in-out", disabled: true, __source: { fileName: "", lineNumber: 100, columnNumber: 140 }, __self: this }, "Coming Soon"), product.status === "available" ? /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 rounded-lg bg-blue-500 text-white font-roboto hover:bg-blue-700 transition duration-150 ease-in-out", name: "addToCart", __source: { fileName: "", lineNumber: 101, columnNumber: 49 }, __self: this }, "Add to Cart") : ""))))); }