function DonationPopup() { return null; } function DonationPopupStory() { return null; } 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 [postData, setPostData] = React.useState({ keywords: "", content: "" }); const [preview, setPreview] = React.useState(false); const [streamingContent, setStreamingContent] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [copySuccess, setCopySuccess] = React.useState(false); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingContent, onFinish: (message)=>{ setPostData((prev)=>({ ...prev, content: message })); setIsLoading(false); } }); const handleChange = (e)=>{ const { name, value } = e.target; setPostData((prev)=>({ ...prev, keywords: value })); }; const generateContent = async ()=>{ if (!postData.keywords) return; setIsLoading(true); setStreamingContent(""); const prompt = `Generate a blog post about ${postData.keywords}. The blog post should be focused specifically on volleyball, providing informative and engaging content with a clear structure including an introduction, main points, and a conclusion. All examples, terminology, and context should be volleyball-related. Aim for approximately 300-400 words.`; try { const response = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error generating content:", error); setIsLoading(false); } }; const exampleTopics = [ "Volleyball Training Tips", "Famous Volleyball Players", "Beach Volleyball Techniques" ]; const googleAnalyticsId = typeof window !== "undefined" ? window.env?.GOOGLE_ANALYTICS_ID : null; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "The Ultimate Volleyball Toolkit - Driven Dragons"), /*#__PURE__*/ React.createElement("meta", { name: "description", content: "Generate professional volleyball content with AI. Created by PA's Most Sought After Volleyball Academy, the Driven Dragons.", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("meta", { name: "keywords", content: "volleyball, content generation, AI toolkit, volleyball training, volleyball academy, Driven Dragons, Pennsylvania volleyball", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-[#F8FBFF] to-white min-h-screen flex flex-col items-center justify-center font-inter relative px-4 sm:px-8 py-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, googleAnalyticsId && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("script", { async: true, src: `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("script", { __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${googleAnalyticsId}'); `)), /*#__PURE__*/ React.createElement("main", { className: "w-full max-w-4xl relative z-10", role: "main", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("header", { role: "banner", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-8", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.drivendragonsvba.com", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/a8b18682-a689-4c12-b806-6dae3465636f/-/format/auto/", alt: "Driven Dragons Logo", className: "h-14", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-4 mb-8", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#4A4A4A] text-sm", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "powered by", " ", /*#__PURE__*/ React.createElement("a", { href: "https://create.xyz", className: "text-[#2B6FF3] hover:text-[#4A4A4A] transition-colors underline", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, "create.xyz"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs sm:text-sm text-[#4A4A4A] inline-block bg-white border border-[#E6F0FF] px-3 py-1 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "AI powered tool")), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl sm:text-5xl font-medium mb-4 sm:mb-6 text-[#2B6FF3] text-center", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "The Ultimate Volleyball Toolkit"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-base sm:text-lg text-[#4A4A4A] mb-8", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Generate engaging volleyball content with ease")), /*#__PURE__*/ React.createElement("section", { className: "content-generator bg-white rounded-lg border border-[#E6F0FF] p-6 mb-8 shadow-sm", role: "region", "aria-label": "Content Generator", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row items-center w-full gap-4", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "keywords", value: postData.keywords, onChange: handleChange, placeholder: "Enter topic or keyword", className: "w-full h-[46px] p-3 text-lg sm:text-xl text-[#101012] bg-white border border-[#E6F0FF] rounded-lg focus:outline-none focus:border-[#2B6FF3] focus:ring-1 focus:ring-[#2B6FF3] transition-colors", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full sm:w-auto", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateContent, disabled: isLoading, className: "w-full sm:w-auto h-[46px] px-6 py-2 text-lg sm:text-xl text-white bg-[#2B6FF3] rounded-lg hover:bg-[#2B6FF3]/90 transition-colors shadow-sm", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, isLoading ? "Generating..." : "Generate"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-2", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, exampleTopics.map((topic)=>/*#__PURE__*/ React.createElement("button", { key: topic, onClick: ()=>setPostData((prev)=>({ ...prev, keywords: topic })), className: "px-4 py-2 border border-[#E6F0FF] rounded-lg text-sm sm:text-base text-[#101012] hover:bg-[#F8FBFF] transition-colors", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, topic))))), (postData.content || isLoading) && /*#__PURE__*/ React.createElement("div", { className: "mt-6 sm:mt-8 bg-white rounded-lg border border-[#E6F0FF] p-6 shadow-sm", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl sm:text-2xl font-medium text-[#2B6FF3] mb-4", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, "Toolkit Results: ", postData.keywords), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-[#101012] mb-6 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, streamingContent || postData.content), !isLoading && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText(postData.content); setCopySuccess(true); setTimeout(()=>setCopySuccess(false), 2000); }, className: "px-4 py-2 border border-[#E6F0FF] rounded-lg text-sm sm:text-base text-[#101012] hover:bg-[#F8FBFF] transition-colors", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, copySuccess ? "✔️" : "Copy Content"))), /*#__PURE__*/ React.createElement("footer", { className: "w-full max-w-4xl mt-12 text-center py-6 border-t border-[#E6F0FF]", role: "contentinfo", __source: { fileName: "", lineNumber: 186, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-[#4A4A4A] mb-2", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, "Created by PA's Most Sought After Volleyball Academy, the", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.drivendragonsvba.com", target: "_blank", rel: "noopener noreferrer", className: "text-[#2B6FF3] hover:text-[#4A4A4A] transition-colors underline", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Driven Dragons")), /*#__PURE__*/ React.createElement("p", { className: "text-xs sm:text-sm text-[#4A4A4A] mt-2", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, "Support our mission by donating to our scholarship and scaling fund through Venmo", " ", /*#__PURE__*/ React.createElement("a", { href: "https://venmo.com/u/DrivenDragonsVolleyball", target: "_blank", rel: "noopener noreferrer", className: "text-[#2B6FF3] hover:text-[#4A4A4A] transition-colors underline", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, "@DrivenDragonsVolleyball"))))); }