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 [imageUrl, setImageUrl] = React.useState(''); const fetchImage = async (event)=>{ event.preventDefault(); const prompt = event.target.elements.search.value; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setImageUrl(data.data[0]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-black flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/cool-google-logo.png", alt: "Cool and stylish logo at the top", className: "h-[100px] object-contain", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", onSubmit: fetchImage, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "w-[300px] sm:w-[400px] md:w-[500px] lg:w-[600px] xl:w-[700px] h-[40px] rounded-full pl-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 bg-[#121212] hover:bg-[#333333] text-white font-roboto rounded-full w-[150px] h-[40px]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Generate")), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated based on input", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }))); }