function Button({ text, keyboardCommand, highlighted = false, onClick }) { const baseClasses = "inline-block px-4 py-2 rounded-lg border text-sm font-medium transition-colors duration-200 ease-in-out"; const regularClasses = "border-[#E2E2E1] text-[#191919]"; const highlightedClasses = "bg-[#6567EF] border-[#6567EF] text-white"; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClasses} ${highlighted ? highlightedClasses : regularClasses}`, __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, text, keyboardCommand && /*#__PURE__*/ React.createElement("span", { className: `ml-2 px-1.5 py-0.5 text-xs rounded ${highlighted ? "bg-[#7A7CF0] text-white" : "bg-[#F6F6F6] text-[#8C8C8C]"}`, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, keyboardCommand)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-start space-y-4 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Regular Button", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "With Keyboard Command", keyboardCommand: "Ctrl+S", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Highlighted Button", highlighted: true, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { text: "Highlighted with Command", keyboardCommand: "Cmd+P", highlighted: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function VerticalSidePanel({ icons, activeIcon, avatarSrc, logoSrc = "https://cdn-icons-png.flaticon.com/512/5149/5149019.png" }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen w-20 bg-white border-r border-gray-200", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Company logo", className: "w-10 h-10", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center space-y-4 py-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, icons.map((icon, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `p-2 rounded-md ${icon === activeIcon ? "bg-gray-200" : "hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} text-gray-600`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center py-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: avatarSrc, alt: "User avatar", className: "w-10 h-10 rounded-full object-cover", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }))); } function VerticalSidePanelStory() { const icons = [ "fa-comment", "fa-user", "fa-bell", "fa-cog" ]; const activeIcon = "fa-comment"; const avatarSrc = "/path/to/avatar.jpg"; return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VerticalSidePanel, { icons: icons, activeIcon: activeIcon, avatarSrc: avatarSrc, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function NewComponent({ logoSrc, altText = "Company logo", size = "w-10 h-10" }) { return /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: altText, className: size, __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { logoSrc: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { logoSrc: "https://cdn-icons-png.flaticon.com/512/5149/5149019.png", altText: "Alternate company logo", size: "w-14 h-14", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); } "use client"; function MainComponent() { const [address, setAddress] = React.useState(""); const handleSearch = async ()=>{ try { // 検索クエリを sessionStorage に保存 sessionStorage.setItem("searchQuery", address); // クエリを含まないリダイレクト window.location.href = "/output"; } catch (error) { alert("エラーが発生しました。"); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col justify-center items-center bg-no-repeat bg-cover", style: { backgroundImage: "url('https://ucarecdn.com/89f680ec-faf7-4954-9c96-6b240dd6d6d5/-/format/auto/')", backgroundSize: "cover" }, __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-8xl font-extrabold animate-fadeInDown mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "ハザードコンパス"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-semibold animate-fadeInDown delay-100", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "地名や施設名を入力してください地震・水害情報を検索します"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md px-4 mt-8 animate-floatUp flex space-x-2", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", placeholder: "東京ディズニーランド", className: "w-full p-4 text-[#191919] outline-none rounded-full border border-[#E4E7EA]", value: address, onChange: (e)=>setAddress(e.target.value), __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "Btn-Container", onClick: handleSearch, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "検索"), /*#__PURE__*/ React.createElement("span", { className: "icon-Container", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "16", height: "19", viewBox: "0 0 16 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "1.61321", cy: "1.61321", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "5.73583", cy: "1.61321", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "5.73583", cy: "5.5566", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "9.85851", cy: "5.5566", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "9.85851", cy: "9.5", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "13.9811", cy: "9.5", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "5.73583", cy: "13.4434", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "9.85851", cy: "13.4434", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "1.61321", cy: "17.3868", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: "5.73583", cy: "17.3868", r: "1.5", fill: "black", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` .Btn-Container { display: flex; width: 170px; height: fit-content; background-color: #1d2129; border-radius: 40px; box-shadow: 0px 5px 10px #bebebe; justify-content: space-between; align-items: center; border: none; cursor: pointer; } .icon-Container { width: 45px; height: 45px; background-color: #6f6de5; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #1d2129; } .text { width: calc(170px - 45px); height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1em; letter-spacing: 1.2px; } .icon-Container svg { transition-duration: 1.5s; } .Btn-Container:hover .icon-Container svg { transition-duration: 1.5s; animation: arrow 1s linear infinite; } @keyframes arrow { 0% { opacity: 0; margin-left: 0px; } 100% { opacity: 1; margin-left: 10px; } } @keyframes fadeInDown { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .animate-fadeInDown { animation: fadeInDown 1s ease-out forwards; } .delay-100 { animation-delay: 0.1s; } @keyframes floatUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .animate-floatUp { opacity: 0; animation: floatUp 0.8s ease-out 0.8s forwards; } `)); }