From 8f9ce695012aff8edefc260845cc0b315825fd87 Mon Sep 17 00:00:00 2001 From: huiwu Zhang Date: Mon, 30 Dec 2024 10:55:59 +0800 Subject: [PATCH 1/7] feat:add default traffic page --- app/(website)/layout.tsx | 11 +++++ app/(website)/traffic/page.tsx | 85 +++++++++++++++++++++++++++++++++- app/Arrow 6.svg | 3 ++ 3 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 app/(website)/layout.tsx create mode 100644 app/Arrow 6.svg diff --git a/app/(website)/layout.tsx b/app/(website)/layout.tsx new file mode 100644 index 00000000..b889aa93 --- /dev/null +++ b/app/(website)/layout.tsx @@ -0,0 +1,11 @@ +import { ReactNode } from "react"; + +export default function Layout({ children }: { children: ReactNode }) { + return ( +
+
+ {children} +
+
+ ); +} diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index 6e7a77a8..20fef6e4 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -1,3 +1,86 @@ +import Image from "next/image"; export default function Page() { - return

交通方式

; + return ( +
+
+

+ 交通方式 +

+

+ 中央研究院 人文社會科學館 +

+

+ 台北市南港區研究院路 2 段 128 號 +

+
+
+ Random Image +
+ + + +
+
+
+
+ {/* arrow */} + + + +
+ + directions_car + +

+ {`由國道三號，南深路 - 中研院匝道 <16km> 出國道三號後，左轉接南深路，再左轉接舊莊路一段直走，遇到與研究路岔路口，即可看到中研院。`} +

+
+
+ + + directions_car + +
+

+ {`由國道三號，南深路 - 中研院匝道 <16km> 出國道三號後，左轉接南深路，再左轉接舊莊路一段直走，遇到與研究路岔路口，即可看到中研院。`} +

+
+
+

中研院門口

+

+ 車輛進入院區請持證件向大門警衛室換取臨時通行證。假日換證不收費，並請停車於院內道路旁停車格。若您於周一至週五來訪，您需停車至人文社會館B2，並須支付停車費用 + (每小時20元 ) +

+
+
+
+ ); } diff --git a/app/Arrow 6.svg b/app/Arrow 6.svg new file mode 100644 index 00000000..4467020d --- /dev/null +++ b/app/Arrow 6.svg @@ -0,0 +1,3 @@ + + + From eef60570dfda4b6fb5ade95974d1c1e017e438f4 Mon Sep 17 00:00:00 2001 From: huiwu Zhang Date: Mon, 30 Dec 2024 15:45:10 +0800 Subject: [PATCH 2/7] add: shuttle version --- app/(website)/traffic/page.tsx | 414 ++++++++++++++++++++++++++++++--- 1 file changed, 383 insertions(+), 31 deletions(-) diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index 20fef6e4..cbf4f51a 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -1,7 +1,14 @@ +"use client"; import Image from "next/image"; + +import { useState } from "react"; + +type Transportation = "car" | "public" | "shuttle"; export default function Page() { + const [transportation, setTransportation] = useState("car"); + return ( -
+
- - -
+ {transportation === "car" && } + {transportation === "public" && } + {transportation === "shuttle" && } +
+ ); +} + +const CarDiagram = () => { + return ( +
+
+ {/* arrow */} + + + +
+ + directions_car + +

+ {`由國道三號，南深路 - 中研院匝道 <16km> 出國道三號後，左轉接南深路，再左轉接舊莊路一段直走，遇到與研究路岔路口，即可看到中研院。`} +

+
+
+ + + directions_car + +
+

+ {`由國道三號，南深路 - 中研院匝道 <16km> 出國道三號後，左轉接南深路，再左轉接舊莊路一段直走，遇到與研究路岔路口，即可看到中研院。`} +

+
+
+

中研院門口

+

+ 車輛進入院區請持證件向大門警衛室換取臨時通行證。假日換證不收費，並請停車於院內道路旁停車格。若您於周一至週五來訪，您需停車至人文社會館B2，並須支付停車費用 + (每小時20元 ) +

+
+
+ ); +}; + +const ShuttleDiagram = () => { + return ( + <> +
+
+ + directions_railway + +

南港展覽館站

+
+ {/* arrow */} + + + +
+

捷運南港展覽館站 2A 出口

+
+ {/* arrow */} +
+ + + + {/* + + */} +
+

接駁車發車時間：7:45~10:00

+

班距：15~20 分鐘一班

+
+
+
+

中研院

+

人文社會科學館

+
+
-
- {/* arrow */} +
+ 捷運 南港展覽館站 2A 出口 +
+
-
- - directions_car +
+ + airport_shuttle -

- {`由國道三號，南深路 - 中研院匝道 <16km> 出國道三號後，左轉接南深路，再左轉接舊莊路一段直走，遇到與研究路岔路口，即可看到中研院。`} -

+

接駁車發車時間：7:45~10:00

+

班距：15~20 分鐘一班

+
+ 中研院 人文社會科學館 +
+
+ + ); +}; - - directions_car - -
-

- {`由國道三號，南深路 - 中研院匝道 <16km> 出國道三號後，左轉接南深路，再左轉接舊莊路一段直走，遇到與研究路岔路口，即可看到中研院。`} -

+const PublicDiagram = () => { + return ( + <> +
+
+
+ + train + +

南港火車站

+
+
+ + + +

高鐵南港站

+
+
+
+ + directions_railway + +

南港展覽館站

+
+
-
-

中研院門口

-

- 車輛進入院區請持證件向大門警衛室換取臨時通行證。假日換證不收費，並請停車於院內道路旁停車格。若您於周一至週五來訪，您需停車至人文社會館B2，並須支付停車費用 - (每小時20元 ) -

+ +
+
+
+ + directions_walk + + + + +
+
+
+ + + +
+
+ +
+
+

捷運

+

南港站

+

2號出口

+
+
+

捷運

+

南港展覽館站

+

5號出口

+
+
+

捷運

+

南港展覽館站

+

4號出口

+
+
+
+
+
+ + + + + + + + + + + + + +

+ 212 直、270（到中研院站） +

+
+
+
+
+ + + + + + + + + + + + + +

+ 205、212、276、306、306區、645（到中研院站） +

+
+
+
+
+ + + + + directions_bike + +
+
+

中研院附近的 YouBike 2.0 站牌 :

+

1.中研院人文社會科學館

+

2.中研院綜合體育館

+

3.研究院舊莊街口

+
+
+
+
+
+
+

中研院

+

人文社會

+

科學館

-
+
+ ); +}; + +{ + /* +directions_bike + */ +} +{ + /* +directions_walk + */ } From 8c79111cff5d732f7302a6a9446f0413def3d967 Mon Sep 17 00:00:00 2001 From: huiwu Zhang Date: Mon, 30 Dec 2024 17:41:16 +0800 Subject: [PATCH 3/7] fix:style fix --- app/(website)/traffic/page.tsx | 227 ++++++++++++++++++++++++++++++++- app/Arrow 10.svg | 3 + app/Arrow 11.svg | 3 + app/Arrow 14.png | Bin 0 -> 239 bytes app/Arrow 8.svg | 3 + 5 files changed, 234 insertions(+), 2 deletions(-) create mode 100644 app/Arrow 10.svg create mode 100644 app/Arrow 11.svg create mode 100644 app/Arrow 14.png create mode 100644 app/Arrow 8.svg diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index cbf4f51a..dc2b464d 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -211,7 +211,7 @@ const PublicDiagram = () => { <>
@@ -421,7 +421,230 @@ const PublicDiagram = () => {

科學館

-
+
+
+
+
+
+ + train + +

南港火車站

+
+
+ + + +

高鐵南港站

+
+
+
+ + + + + directions_walk + +
+
+

捷運

+

南港站

+

2號出口

+
+
+
+
+
+ + directions_railway + +

南港站覽館站

+
+
+
+ + + +
+
+
+

捷運

+

南港展覽館站

+
+
+
+ 5號出口 +
+
+ 4號出口 +
+
+
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+ + + + + + + + + + +

+ 205、212、 276、306、 306區、645 （到中研院站） +

+
+
+
+
+ + + + + + + + + + +

212 直、270 （到中研院站）

+
+
+
+
+
+
+
+ + directions_bike + +
+

YouBike 2.0 還車點 :

+

1.中研院人文社會科學館

+

2.中研院綜合體育館

+

3.研究院舊莊街口

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
); }; diff --git a/app/Arrow 10.svg b/app/Arrow 10.svg new file mode 100644 index 00000000..736a3ed8 --- /dev/null +++ b/app/Arrow 10.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/Arrow 11.svg b/app/Arrow 11.svg new file mode 100644 index 00000000..3cec76a5 --- /dev/null +++ b/app/Arrow 11.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/Arrow 14.png b/app/Arrow 14.png new file mode 100644 index 0000000000000000000000000000000000000000..23a57afaeda928b75af0b3b428500adb26123859 GIT binary patch literal 239 zcmeAS@N?(olHy`uVBq!ia0vp^0zjP4!3HFswmXypDb50q$YKTtZeb8+WSBKa0w~B> z9OUlAu + + From 19eda920d061ad05bdc0deb91cc3d98c584dde66 Mon Sep 17 00:00:00 2001 From: Pizza6inch Date: Tue, 31 Dec 2024 10:04:10 +0800 Subject: [PATCH 4/7] add:image backup --- app/(website)/traffic/page.tsx | 184 ++++++++++++++++++++++----------- app/Arrow 10.svg | 3 - app/Arrow 11.svg | 3 - app/Arrow 14.png | Bin 239 -> 0 bytes app/Arrow 6.svg | 3 - app/Arrow 8.svg | 3 - 6 files changed, 126 insertions(+), 70 deletions(-) delete mode 100644 app/Arrow 10.svg delete mode 100644 app/Arrow 11.svg delete mode 100644 app/Arrow 14.png delete mode 100644 app/Arrow 6.svg delete mode 100644 app/Arrow 8.svg diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index dc2b464d..b1f0279d 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -2,11 +2,20 @@ import Image from "next/image"; import { useState } from "react"; +import { motion } from "framer-motion"; type Transportation = "car" | "public" | "shuttle"; export default function Page() { const [transportation, setTransportation] = useState("car"); + const [isLoading, setIsLoading] = useState(true); + + const options: Array<{ value: Transportation; label: string }> = [ + { value: "shuttle", label: "大眾接駁車" }, + { value: "public", label: "大眾運輸工具" }, + { value: "car", label: "自行開車" }, + ]; + return (
- Random Image +
+ {isLoading && ( +
+ 地圖加載中~ +
+ )} + Random Image setIsLoading(false)} + priority={true} + /> +
+
- - - + {options.map((option) => ( + setTransportation(option.value)} + className={`flex h-[60px] flex-grow items-center justify-center rounded-xl text-black ${ + transportation === option.value + ? "bg-[#B9D3E6]" + : "bg-[#DEE6EB]" + }`} + > + {option.label} + + ))}
{transportation === "car" && } @@ -191,9 +210,27 @@ const ShuttleDiagram = () => { />
- - airport_shuttle - + + + + + + + + + +

接駁車發車時間：7:45~10:00

班距：15~20 分鐘一班

@@ -230,8 +267,8 @@ const PublicDiagram = () => { className="mr-4" > @@ -325,10 +362,10 @@ const PublicDiagram = () => { xmlns="http://www.w3.org/2000/svg" className="absolute bottom-4 flex w-full justify-center" > - + @@ -367,10 +404,10 @@ const PublicDiagram = () => { xmlns="http://www.w3.org/2000/svg" className="absolute bottom-4 flex w-full justify-center" > - + @@ -443,8 +480,8 @@ const PublicDiagram = () => { xmlns="http://www.w3.org/2000/svg" > @@ -570,10 +607,10 @@ const PublicDiagram = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - + @@ -598,10 +635,10 @@ const PublicDiagram = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - + @@ -636,26 +673,57 @@ const PublicDiagram = () => {
-
-
+
+ + + +
+
+ + + +
-
+
+ + + +
+
+ 中研院 人文社會科學館 +
); }; - -{ - /* -directions_bike - */ -} -{ - /* -directions_walk - */ -} diff --git a/app/Arrow 10.svg b/app/Arrow 10.svg deleted file mode 100644 index 736a3ed8..00000000 --- a/app/Arrow 10.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/Arrow 11.svg b/app/Arrow 11.svg deleted file mode 100644 index 3cec76a5..00000000 --- a/app/Arrow 11.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/Arrow 14.png b/app/Arrow 14.png deleted file mode 100644 index 23a57afaeda928b75af0b3b428500adb26123859..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 239 zcmeAS@N?(olHy`uVBq!ia0vp^0zjP4!3HFswmXypDb50q$YKTtZeb8+WSBKa0w~B> z9OUlAu - - diff --git a/app/Arrow 8.svg b/app/Arrow 8.svg deleted file mode 100644 index 1bb9b927..00000000 --- a/app/Arrow 8.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 14a4c47d059f2f4403e437177c0b9d2a98b65486 Mon Sep 17 00:00:00 2001 From: Pizza6inch Date: Tue, 31 Dec 2024 10:09:17 +0800 Subject: [PATCH 5/7] fix:style change --- app/(website)/traffic/page.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index b1f0279d..56f01ee3 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -170,14 +170,6 @@ const ShuttleDiagram = () => { fill="white" /> - {/* - - */}

接駁車發車時間：7:45~10:00

班距：15~20 分鐘一班

@@ -202,7 +194,7 @@ const ShuttleDiagram = () => { viewBox="0 0 16 208" fill="none" xmlns="http://www.w3.org/2000/svg" - className="mx-8" + className="ml-8 mr-16" > Date: Tue, 31 Dec 2024 10:13:29 +0800 Subject: [PATCH 6/7] add:some dubug --- app/(website)/traffic/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index 56f01ee3..294c0937 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -11,11 +11,13 @@ export default function Page() { const [isLoading, setIsLoading] = useState(true); const options: Array<{ value: Transportation; label: string }> = [ - { value: "shuttle", label: "大眾接駁車" }, + { value: "shuttle", label: "大眾接駁車" },ad { value: "public", label: "大眾運輸工具" }, { value: "car", label: "自行開車" }, ]; + console.log("開發組的各位新年快樂拉~ by pizza"); + return (
Date: Tue, 31 Dec 2024 10:14:39 +0800 Subject: [PATCH 7/7] fix:debug --- app/(website)/traffic/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/(website)/traffic/page.tsx b/app/(website)/traffic/page.tsx index 294c0937..00296bbc 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -11,7 +11,7 @@ export default function Page() { const [isLoading, setIsLoading] = useState(true); const options: Array<{ value: Transportation; label: string }> = [ - { value: "shuttle", label: "大眾接駁車" },ad + { value: "shuttle", label: "大眾接駁車" }, { value: "public", label: "大眾運輸工具" }, { value: "car", label: "自行開車" }, ];