function NavigationButton({ text = "ボタン", icon = "fa-star", onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "inline-flex items-center justify-center px-8 py-4 text-lg bg-white border-2 border-blue-500 rounded-lg hover:bg-blue-50 active:bg-blue-100 transition-colors duration-200", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2`, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, text)); } function NavigationButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationButton, { text: "クリックしてください", icon: "fa-heart", onClick: ()=>alert("クリックされました！"), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NavigationButton, { text: "送信", icon: "fa-paper-plane", onClick: ()=>alert("送信されました！"), __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NavigationButton, { text: "保存", icon: "fa-save", onClick: ()=>alert("保存されました！"), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function Header({ defaultLanguage = "JP" }) { const [selectedLang, setSelectedLang] = useState(defaultLanguage); const [currentTime, setCurrentTime] = useState(new Date()); useEffect(()=>{ const timer = setInterval(()=>{ setCurrentTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); const languages = [ { code: "JP", label: "日本語" }, { code: "EN", label: "English" }, { code: "CN", label: "中文" }, { code: "KR", label: "한국어" } ]; return /*#__PURE__*/ React.createElement("header", { className: "w-full bg-white border-b border-blue-100", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-3 flex justify-between items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-blue-600 font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, currentTime.toLocaleTimeString()), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("button", { key: lang.code, onClick: ()=>setSelectedLang(lang.code), className: `px-2 py-1 rounded ${selectedLang === lang.code ? "bg-blue-500 text-white" : "text-blue-500 hover:bg-blue-50"}`, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, lang.label))))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { defaultLanguage: "JP", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { defaultLanguage: "EN", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { defaultLanguage: "CN", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { defaultLanguage: "KR", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }))); } function TrainInfo({ routeStatus = "平常運転", nextDepartures = [], lineName = "山手線" }) { const [currentTime, setCurrentTime] = useState(new Date()); useEffect(()=>{ const timer = setInterval(()=>{ setCurrentTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] p-6 rounded-lg shadow-md max-w-[600px]", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-noto-sans text-xl mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, lineName), /*#__PURE__*/ React.createElement("div", { className: `text-lg font-bold mb-2 ${routeStatus === "平常運転" ? "text-green-600" : "text-red-600"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${routeStatus === "平常運転" ? "fa-check-circle" : "fa-exclamation-circle"} mr-2`, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), routeStatus)), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-noto-sans text-lg mb-3", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "次の発車時刻"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, nextDepartures.map((departure, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center border-b pb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-train text-gray-600 mr-3", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-noto-sans", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, departure.destination)), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, departure.time))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-right text-gray-600 font-noto-sans text-sm", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "最終更新: ", currentTime.toLocaleTimeString("ja-JP"))); } function TrainInfoStory() { const sampleDepartures = [ { destination: "渋谷方面", time: "10:05" }, { destination: "池袋方面", time: "10:08" }, { destination: "新宿方面", time: "10:12" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-noto-sans mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "通常運転時"), /*#__PURE__*/ React.createElement(TrainInfo, { routeStatus: "平常運転", nextDepartures: sampleDepartures, lineName: "山手線", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-noto-sans mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "遅延発生時"), /*#__PURE__*/ React.createElement(TrainInfo, { routeStatus: "遅延発生", nextDepartures: sampleDepartures, lineName: "中央線", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }))); } function StationMap({ onSelectFacility = ()=>{} }) { const [selectedFacility, setSelectedFacility] = useState(null); const facilities = [ { id: 1, name: "JR改札口", x: 50, y: 40 }, { id: 2, name: "モノレール改札口", x: 70, y: 20 }, { id: 3, name: "アミュプラザ", x: 30, y: 60 }, { id: 4, name: "小倉城口", x: 20, y: 40 }, { id: 5, name: "新幹線改札口", x: 80, y: 40 } ]; const handleFacilityClick = (facility)=>{ setSelectedFacility(facility); onSelectFacility(facility); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-[800px] h-[600px] bg-[#f5f5f5] rounded-lg shadow-lg p-4 font-noto-sans", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 text-xl font-bold text-[#333]", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "小倉駅マップ"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full border-2 border-[#ddd] rounded mt-12", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, facilities.map((facility)=>/*#__PURE__*/ React.createElement("button", { key: facility.id, className: `absolute transform -translate-x-1/2 -translate-y-1/2 p-2 rounded-full ${selectedFacility?.id === facility.id ? "bg-[#4a90e2] text-white" : "bg-white text-[#333] hover:bg-[#e3f2fd]"} shadow-md transition-colors duration-200`, style: { left: `${facility.x}%`, top: `${facility.y}%` }, onClick: ()=>handleFacilityClick(facility), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), facility.name)))); } function StationMapStory() { const handleFacilitySelect = (facility)=>{ console.log("Selected facility:", facility.name); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 min-h-screen flex justify-center items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StationMap, { onSelectFacility: handleFacilitySelect, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this })); } function ChatBot({ onClose, visible = false }) { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const messagesEndRef = useRef(null); const responses = { 駅の設備: "小倉駅には、トイレ、券売機、エレベーター、エスカレーターなどの設備があります。", トイレ: "トイレは中央改札を出て右に曲がった場所にあります。", 券売機: "券売機は中央改札を出て左側にあります。", 時刻表: "次の電車は12:05発小倉方面、12:10発黒崎方面、12:15発門司港方面です。", モノレール: "次のモノレールは12:03発企救丘方面、12:08発平和通方面です。", 運行状況: "現在、JR鹿児島本線と日豊本線は平常運転です。小倉モノレールは遅延が発生しています。", default: "申し訳ありません。その質問にはお答えできません。" }; const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const handleSend = ()=>{ if (!input.trim()) return; const newMessages = [ ...messages, { text: input, isUser: true } ]; let response = responses.default; Object.keys(responses).forEach((key)=>{ if (input.includes(key)) { response = responses[key]; } }); newMessages.push({ text: response, isUser: false }); setMessages(newMessages); setInput(""); }; if (!visible) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 w-[350px] bg-white rounded-xl shadow-xl border border-gray-200", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-noto-sans text-gray-800", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "駅案内チャット"), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.isUser ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] p-3 rounded-lg ${message.isUser ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, message.text))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSend(), placeholder: "質問を入力してください...", className: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }))))); } function ChatBotStory() { const [chatVisible, setChatVisible] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setChatVisible(true), className: "bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, "チャットを開く"), /*#__PURE__*/ React.createElement(ChatBot, { visible: chatVisible, onClose: ()=>setChatVisible(false), __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this })); } function MainComponent() { const [trainStatuses] = useState([ { line: "日豊本線", status: "平常運転", color: "text-green-500", icon: "fa-check-circle" }, { line: "鹿児島本線", status: "平常運転", color: "text-green-500", icon: "fa-check-circle" }, { line: "小倉モノレール", status: "平常運転", color: "text-green-500", icon: "fa-check-circle" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { defaultLanguage: "JP", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4 py-6", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-noto-sans text-gray-800 text-center mb-8", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "小倉駅案内"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-10", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 pt-4", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/guide", className: "bg-[#1E90FF] hover:bg-[#1880e0] text-white rounded-xl p-10 text-3xl font-noto-sans shadow-lg transition-all duration-200 flex items-center justify-center space-x-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt text-4xl", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "小倉駅構内案内")), /*#__PURE__*/ React.createElement("a", { href: "/trains", className: "bg-[#1E90FF] hover:bg-[#1880e0] text-white rounded-xl p-10 text-3xl font-noto-sans shadow-lg transition-all duration-200 flex items-center justify-center space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-train text-4xl", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "小倉駅列車案内"))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-8 shadow-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-noto-sans mb-6 text-gray-800 flex items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle text-[#1E90FF] mr-3", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), "運行状況"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, trainStatuses.map((train, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between border-b border-gray-200 pb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-noto-sans", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, train.line), /*#__PURE__*/ React.createElement("div", { className: `flex items-center ${train.color} text-xl`, __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${train.icon} mr-2`, __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this }, train.status)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-xl p-8 shadow-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-noto-sans mb-6 text-gray-800 flex items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-[#1E90FF] mr-3", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), "駅案内チャットボット"), /*#__PURE__*/ React.createElement(React.Fragment, null))))); }