${data.title}

${data.description?.slice(0, 110)}

${url}

`; setGeneratedCode(html); } catch (error) { console.error(error); } finally { setLoading(false); } }, [url]); return /* @__PURE__ */ React.createElement("div", { className: "max-w-3xl mx-auto p-4 space-y-4 font-roboto min-h-screen flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex-grow" }, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-bold mb-4" }, "\u30D6\u30ED\u30B0\u30AB\u30FC\u30C9\u30B8\u30A7\u30CD\u30EC\u30FC\u30BF\u30FC"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement( "input", { type: "text", name: "url", placeholder: "URL\u3092\u5165\u529B", className: "flex-1 p-2 border rounded", value: url, onChange: (e) => setUrl(e.target.value) } ), /* @__PURE__ */ React.createElement( "button", { onClick: fetchPageData, disabled: loading, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400" }, loading ? "\u8AAD\u307F\u8FBC\u307F\u4E2D..." : "\u53D6\u5F97" )), generatedCode && /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: () => navigator.clipboard.writeText(generatedCode), className: "mb-4 px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600" }, "\u30B3\u30FC\u30C9\u3092\u30B3\u30D4\u30FC" ), /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: generatedCode } })), /* @__PURE__ */ React.createElement( "textarea", { className: "w-full h-[300px] p-2 border rounded font-mono text-sm", value: generatedCode, readOnly: true } )), cardData.title && /* @__PURE__ */ React.createElement("div", { className: "border rounded-lg bg-white p-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-[150px,1fr] gap-5" }, /* @__PURE__ */ React.createElement("div", { className: "aspect-[16/9] overflow-hidden rounded" }, cardData.imageUrl && /* @__PURE__ */ React.createElement( "img", { src: cardData.imageUrl, alt: cardData.title, className: "w-full h-full object-cover" } )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-between" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-bold mb-2" }, cardData.title), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 text-sm line-clamp-3" }, cardData.description)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-gray-500" }, cardData.faviconUrl && /* @__PURE__ */ React.createElement( "img", { src: cardData.faviconUrl, alt: "favicon", className: "w-4 h-4 mr-2" } ), /* @__PURE__ */ React.createElement("span", { className: "text-xs mr-2" }, url), /* @__PURE__ */ React.createElement("i", { className: "fas fa-external-link-alt w-3 h-3" })))))), /* @__PURE__ */ React.createElement("footer", { className: "mt-8 py-4 text-center text-gray-600 text-sm" }, /* @__PURE__ */ React.createElement( "a", { href: "https://wpaijuku.online/", target: "_blank", rel: "noopener noreferrer", className: "hover:text-gray-800" }, "\xA9 \u30D6\u30ED\u30B0\u30E9\u30A4\u30D5 with AI" ))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();

ブログカードジェネレーター