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 BlueSkyDisplay({ imageUrl, menuItems = [ "Home", "About", "Blog" ], style, children }) { return /*#__PURE__*/ React.createElement("div", { className: "h-[160px] w-full bg-black", __source: { fileName: "", lineNumber: 3, columnNumber: 10 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[20px] bg-[#000000] flex justify-between items-center px-4", __source: { fileName: "", lineNumber: 4, columnNumber: 14 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 5, columnNumber: 18 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-white font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 26 }, __self: this }, item)))), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "A generated depiction of the sky with stars, blending in dreamy visions of a blue sky and buildings with stable diffusion integration", className: "w-full h-full object-cover", style: style, __source: { fileName: "", lineNumber: 13, columnNumber: 14 }, __self: this }), children); } function BlueSkyDisplayStory() { const imageUrl = "path/to/highQualityBlueSky.jpg"; const style = { opacity: 0.8 }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 10 }, __self: this }, /*#__PURE__*/ React.createElement(BlueSkyDisplay, { imageUrl: imageUrl, style: style, __source: { fileName: "", lineNumber: 25, columnNumber: 14 }, __self: this })); } function MainComponent() { const [imageUrl, setImageUrl] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/stable-diffusion/?prompt=sky+star', { method: 'GET' }).then((response)=>response.json()).then((data)=>setImageUrl(data.data[0])); }, []); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#000000] p-[20px]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex justify-between", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "MENU"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "text-white", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("li", { className: "text-white", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("li", { className: "text-white", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Blog")))), /*#__PURE__*/ React.createElement(BlueSkyDisplay, { imageUrl: imageUrl, menuItems: [ "Home", "About", "Blog" ], __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); }