function PixelifySansButton({ text, variant = "default", onClick }) { const baseClasses = "group relative font-pixelify-sans px-6 py-3 active:translate-y-[2px] active:translate-x-[-2px]"; const textClasses = variant === "filled" ? "text-white" : "text-[#333] group-hover:text-black"; const bgClasses = variant === "filled" ? "bg-black" : "bg-transparent"; return /*#__PURE__*/ React.createElement("button", { className: `${baseClasses} ${bgClasses}`, onClick: onClick, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `relative z-10 ${textClasses}`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, text), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[6px] left-[6px] right-[6px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[4px] left-[6px] right-[6px] h-[2px] bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute bottom-[-2px] left-[4px] right-[4px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute left-[-2px] top-[4px] bottom-[4px] w-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }))); } function PixelifySansButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Default Button", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Filled Button", variant: "filled", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function MainComponent() { const [url, setUrl] = React.useState(""); const [result, setResult] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); setResult(null); try { const response = await fetch("/api/screenshot-url-generator", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: url.startsWith("http") ? url : `https://${url}` }) }); if (!response.ok) { throw new Error("Failed to fetch"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setResult(data); } catch (err) { setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white text-black font-pixelify-sans p-4 md:p-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, !result ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-semibold mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "burn my page"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-md", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "portfolioUrl", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "website URL", className: "flex-grow bg-white border-2 border-black text-black p-2 w-full min-w-[300px]", required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(PixelifySansButton, { text: loading ? "🔥 roasting..." : "roast it", type: "submit", disabled: loading, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this })))) : /*#__PURE__*/ React.createElement("div", { className: "w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-semibold mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "burn my page"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full mb-8", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "portfolioUrl", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "website URL", className: "flex-grow bg-white border-2 border-black text-black p-2 w-full md:w-auto min-w-[300px]", required: true, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(PixelifySansButton, { text: loading ? "🔥 roasting..." : "roast it", type: "submit", disabled: loading, __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-8 items-start w-full", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.screenshot, alt: "Screenshot of the submitted landing page website", className: "w-full border-2 border-black aspect-video object-cover object-top", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 flex flex-col justify-between h-full", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-black text-3xl md:text-5xl mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, result.roast))), /*#__PURE__*/ React.createElement("a", { href: "https://www.create.xyz/", target: "_blank", rel: "noopener noreferrer", className: "text-black underline mt-8 text-xl", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "you just got roasted by create.xyz")), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, error)); }