function MainComponent() { const [inputText, setInputText] = React.useState(""); const [companies, setCompanies] = React.useState([]); React.useEffect(()=>{ if (!inputText) { setCompanies([]); return; } const fetchData = async ()=>{ const fetchedCompanies = [ { companyName: "企業A", serviceName: "サービスA", feature: "特徴A", url: "http://example.com/serviceA", video: "http://example.com/videoA.mp4", metrics: { technology: 80, communication: 70, price: 60, patents: 50, cases: 40 } } ]; setCompanies(fetchedCompanies); }; fetchData(); }, [ inputText ]); const drawPolygon = (metrics)=>{ const size = 100; const points = [ `${size * metrics.technology / 100},${0}`, `${size},${size * metrics.communication / 100}`, `${size - size * metrics.price / 100},${size}`, `${0},${size - size * metrics.patents / 100}`, `${size * metrics.cases / 100},${0}` ].join(" "); return points; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-8", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "businessProjectIdea", placeholder: "新規事業開発案をここに入力してください。", className: "p-4 w-full max-w-[600px] h-40 border-2 border-gray-300 rounded-md", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("table", { className: "table-auto border-collapse border border-gray-300", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "企業名"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "サービス名"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "サービスの特徴"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "サービスページのURL"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, companies.slice(0, 5).map((company, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, company.companyName), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, company.serviceName), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, company.feature), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: company.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 68, columnNumber: 64 }, __self: this }, "サービスページ")))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, companies.slice(0, 5).map((company, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 100 100", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("polygon", { points: drawPolygon(company.metrics), fill: "rgba(59, 130, 246, 0.5)", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: company.video, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, company.companyName, " の動画を見る")))))); }