function CompanySearchBox({ name, placeholder, className }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: name, placeholder: placeholder, className: `w-full p-2 border border-gray-300 rounded mb-4 font-roboto ${className}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function CompanySearchBoxStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CompanySearchBox, { name: "search", placeholder: "Search for a company...", className: "", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [companyDetails, setCompanyDetails] = React.useState(null); const searchCompany = async (e)=>{ e.preventDefault(); const query = e.target.elements.search.value; // Mock API response const data = { companyName: "Example Corp", industry: "Technology", website: "https://example.com", stockPrice: "123.45", marketCap: "456B", peRatio: "35.67" }; if (query.toLowerCase() === "example corp") { setCompanyDetails(data); } else { setCompanyDetails(null); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-4 font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Company Stock Search"), /*#__PURE__*/ React.createElement("form", { onSubmit: searchCompany, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(CompanySearchBox, { name: "search", placeholder: "Search for a company...", className: "mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Search")), companyDetails && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start mt-8", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Company Details"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Company Name: ", companyDetails.companyName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Industry: ", companyDetails.industry), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Website: ", /*#__PURE__*/ React.createElement("a", { href: companyDetails.website, className: "text-blue-500", __source: { fileName: "", lineNumber: 41, columnNumber: 65 }, __self: this }, companyDetails.website))), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-crimson-text", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Stock Details"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Current Stock Price: $", companyDetails.stockPrice), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Market Cap: $", companyDetails.marketCap), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "P/E Ratio: ", companyDetails.peRatio))))); }