function ButtonStyles({ variant = "primary", text, keyboardCommand, onClick }) { const baseClasses = "font-inter font-medium rounded-lg px-4 py-2 inline-block"; const primaryClasses = "bg-[#101012] text-white border border-[#3D3D3F]"; const secondaryClasses = "bg-transparent text-[#101012] border border-[#D1D1D3]"; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClasses} ${variant === "primary" ? primaryClasses : secondaryClasses}`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, text, keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: `ml-2 text-xs px-1.5 py-0.5 rounded ${variant === "primary" ? "bg-[#3D3D3F] text-white" : "bg-[#D1D1D3] text-[#101012]"}`, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStylesStory() { const handleClick = ()=>{ alert('Button clicked!'); }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Primary Button"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Click me", onClick: handleClick, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Primary Button with Keyboard Command"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Save", keyboardCommand: "⌘S", onClick: handleClick, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Secondary Button"), /*#__PURE__*/ React.createElement(ButtonStyles, { variant: "secondary", text: "Cancel", onClick: handleClick, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Secondary Button with Keyboard Command"), /*#__PURE__*/ React.createElement(ButtonStyles, { variant: "secondary", text: "Undo", keyboardCommand: "⌘Z", onClick: handleClick, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [essay, setEssay] = React.useState(''); const [loading, setLoading] = React.useState(false); const [paid, setPaid] = React.useState(false); const [selectedModel, setSelectedModel] = React.useState('CHAT_GPT'); const generateEssay = async ()=>{ setLoading(true); try { const endpoint = selectedModel === 'CHAT_GPT' ? '/integrations/chat-gpt/conversationgpt4' : '/integrations/google-gemini-1-5/'; const response = await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: prompt } ] }) }); const data = await response.json(); setEssay(data.choices[0].message.content); } catch (error) { console.error('Error generating essay:', error); } setLoading(false); }; const handlePayment = ()=>{ setPaid(true); }; const visibleEssay = essay.split('.').slice(0, 2).join('.') + '.'; const blurredEssay = essay.split('.').slice(2).join('.'); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-inter bg-[#FCFCFC]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Write me essay with 400 words about Ana Karenina...", className: "flex-grow p-2 border border-[#D1D1D3] rounded-lg text-[#101012]", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: selectedModel, onChange: (e)=>setSelectedModel(e.target.value), className: "p-2 border border-[#D1D1D3] rounded-lg text-[#101012]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "CHAT_GPT", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("option", { value: "GOOGLE_GEMINI_1_5", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Google Gemini 1.5"))), /*#__PURE__*/ React.createElement(ButtonStyles, { text: loading ? 'Generating...' : 'Generate Essay', onClick: generateEssay, disabled: loading, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this })), essay && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-[#D1D1D3] rounded-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#101012]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, visibleEssay), !paid && blurredEssay && /*#__PURE__*/ React.createElement("div", { className: "mt-4 relative", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#F2F2F2] bg-opacity-75 flex items-center justify-center rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 text-[#777777]", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, "Full essay is blurred"), /*#__PURE__*/ React.createElement(ButtonStyles, { text: "Pay to View Full Essay", onClick: handlePayment, variant: "secondary", __source: { fileName: "", lineNumber: 75, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[#101012] blur-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, blurredEssay)), paid && blurredEssay && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-[#101012]", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, blurredEssay)))); }