function YouTubeApiKeyInput({ label }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, label), /*#__PURE__*/ React.createElement("input", { type: "text", name: "apiKey", className: "border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function YouTubeApiKeyInputStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(YouTubeApiKeyInput, { label: "YouTube Data API Key", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-gradient-to-r from-[#d16ba5] to-[#86a8e7]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[500px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-8 font-sans", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "YouTube 検索アプリ"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(YouTubeApiKeyInput, { label: "YouTube Data API キー", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "検索ワード"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchWord", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2 flex-grow", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "年 /月/日"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "startDate", className: "w-full p-2 border border-gray-300 rounded flex-grow", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar ml-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2 flex-grow", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "年 /月/日"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "endDate", className: "w-full p-2 border border-gray-300 rounded flex-grow", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-calendar ml-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2 flex-grow", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "動画の長さ"), /*#__PURE__*/ React.createElement("select", { name: "videoLength", className: "w-full p-2 border border-gray-300 rounded flex-grow", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "any", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Any"), /*#__PURE__*/ React.createElement("option", { value: "short", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Short (< 4 minutes)"), /*#__PURE__*/ React.createElement("option", { value: "long", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Long (> 20 minutes)")), /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-down ml-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-medium mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "最小視聴回数"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "minViews", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }))))); }