function DarkThemedHeader({ logoSrc, logoAlt, placeholder, buttons }) { return /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between bg-[#1E1E1E] p-2 w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: logoAlt, className: "w-[24px] h-[24px]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "bg-[#333] p-1 rounded text-white w-[300px]", placeholder: placeholder, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, buttons.map((button, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "text-white bg-[#444] p-1 rounded", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, button)))); } function DarkThemedHeaderStory() { const buttons = [ "トップ", "フォロー", "ChatGPT", "ニュース", "スポーツ", "カジュアルゲーム", "マネー", "ゲーム", "天気", "ビデオ" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DarkThemedHeader, { logoSrc: "/path/to/logo.png", logoAlt: "Microsoft Start logo", placeholder: "ニュース、国名、日付などで検索", buttons: buttons, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function MainComponent() { const [imageUrl, setImageUrl] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/stable-diffusion/?prompt=a+cat').then((response)=>response.json()).then((data)=>setImageUrl(data.data[0])); }, []); const buttons = [ "トップ", "フォロー", "ChatGPT", "ニュース", "スポーツ", "カジュアルゲーム", "マネー", "ゲーム", "天気", "ビデオ" ]; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-hidden", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DarkThemedHeader, { logoSrc: "/path/to/logo.png", logoAlt: "Microsoft Start logo", placeholder: "ニュース、国名、日付などで検索", buttons: buttons, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("video", { autoPlay: true, muted: true, loop: true, className: "absolute w-auto min-w-full min-h-full max-w-none", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "https://videos.pexels.com/video-files/5107650/5107650-hd_1920_1080_30fps.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full bg-opacity-50 bg-black flex flex-col justify-center items-center text-center pt-16", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-bold text-4xl md:text-6xl lg:text-8xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Best Ski Resorts"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-xl md:text-3xl lg:text-4xl mb-8 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Book your trip now"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "vacationDate", className: "text-black p-2 rounded-lg mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "A cat generated by Stable Diffusion", className: "w-[200px] h-[200px] rounded-full", __source: { fileName: "", lineNumber: 35, columnNumber: 22 }, __self: this }))); }