function GenerateSonnetButton({ onClick }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "self-end px-4 py-2 bg-blue-600 text-white font-semibold rounded", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, "Generate Sonnet"); } function GenerateSonnetButtonStory() { const handleButtonClick = ()=>{ alert('Generate Sonnet'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-end p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateSonnetButton, { onClick: handleButtonClick, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleButtonClick = ()=>{ alert('Generate Sonnet'); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full max-w-2xl bg-white shadow p-4 mb-6", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text font-bold text-gray-900", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Claude 3.5 Sonnet")), /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-2xl bg-white shadow p-4 rounded-md", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text font-semibold text-gray-800", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-gray-600", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "Welcome to the Claude 3.5 Sonnet interface. Here you can explore beautiful poetry and Sonnets created by Claude, directly inspired by the classical sonnet form.")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text font-semibold text-gray-800", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Get Started"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-gray-600 mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Enter a word or a theme below to generate a personalized sonnet."), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "theme", placeholder: "Enter a theme or word", className: "p-2 border border-gray-300 rounded mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(GenerateSonnetButton, { onClick: handleButtonClick, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }))))); }