function VideoUploadForm({ onVideoUpload, onTitleChange, onDescriptionChange, onSubmit }) { const containerStyle = "flex flex-col space-y-4"; const labelStyle = "text-lg font-roboto"; const inputStyle = "border border-black p-2"; return /*#__PURE__*/ React.createElement("div", { className: containerStyle, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "upload-video", className: labelStyle, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "動画をアップロード:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "upload-video", name: "upload-video", className: inputStyle, onChange: onVideoUpload, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "video-title", className: labelStyle, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "タイトル"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "video-title", name: "video-title", placeholder: "動画のタイトル", className: inputStyle, onChange: onTitleChange, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "video-description", className: labelStyle, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, "説明"), /*#__PURE__*/ React.createElement("textarea", { id: "video-description", name: "video-description", placeholder: "動画の説明を入力", className: inputStyle, onChange: onDescriptionChange, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-600 text-white p-4 rounded-lg font-roboto border border-black", onClick: onSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "編集を開始")); } function VideoUploadFormStory() { const handleVideoUpload = (e)=>{ console.log(e.target.files); }; const handleTitleChange = (e)=>{ console.log(e.target.value); }; const handleDescriptionChange = (e)=>{ console.log(e.target.value); }; const handleSubmit = ()=>{ console.log('編集を開始 clicked'); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoUploadForm, { onVideoUpload: handleVideoUpload, onTitleChange: handleTitleChange, onDescriptionChange: handleDescriptionChange, onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleVideoUpload = (e)=>{ console.log(e.target.files); }; const handleTitleChange = (e)=>{ console.log(e.target.value); }; const handleDescriptionChange = (e)=>{ console.log(e.target.value); }; const handleSubmit = ()=>{ console.log('編集を開始 clicked'); }; return /*#__PURE__*/ React.createElement("div", { className: "flex w-full h-screen bg-white", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] bg-[#f5f5f5] shadow-xl p-6 space-y-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-black", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, "プロジェクト"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-black", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "動画編集"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-black", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, "API")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center justify-center p-6 gap-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-black text-4xl font-roboto mb-4", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "ショート動画エディター"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-8 rounded-2xl shadow-xl", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(VideoUploadForm, { onVideoUpload: handleVideoUpload, onTitleChange: handleTitleChange, onDescriptionChange: handleDescriptionChange, onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })))); }