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..00296bbc 100644 --- a/app/(website)/traffic/page.tsx +++ b/app/(website)/traffic/page.tsx @@ -1,3 +1,723 @@ +"use client"; +import Image from "next/image"; + +import { useState } from "react"; +import { motion } from "framer-motion"; + +type Transportation = "car" | "public" | "shuttle"; export default function Page() { - return

交通方式

; + 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: "自行開車" }, + ]; + + console.log("開發組的各位新年快樂拉~ by pizza"); + + return ( +
+
+

+ 交通方式 +

+

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

+

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

+
+
+
+ {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" && } + {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 分鐘一班

+
+
+
+

中研院

+

人文社會科學館

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

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

+

班距：15~20 分鐘一班

+
+
+
+ 中研院 人文社會科學館 +
+
+ + ); +}; + +const PublicDiagram = () => { + return ( + <> +
+
+
+ + train + +

南港火車站

+
+
+ + + +

高鐵南港站

+
+
+
+ + directions_railway + +

南港展覽館站

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

捷運

+

南港站

+

2號出口

+
+
+

捷運

+

南港展覽館站

+

5號出口

+
+
+

捷運

+

南港展覽館站

+

4號出口

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

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

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

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

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

中研院附近的 YouBike 2.0 站牌 :

+

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

+

2.中研院綜合體育館

+

3.研究院舊莊街口

+
+
+
+
+
+
+

中研院

+

人文社會

+

科學館

+
+
+
+
+
+
+
+ + train + +

南港火車站

+
+
+ + + +

高鐵南港站

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

捷運

+

南港站

+

2號出口

+
+
+
+
+
+ + directions_railway + +

南港站覽館站

+
+
+
+ + + +
+
+
+

捷運

+

南港展覽館站

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

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

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

212 直、270 （到中研院站）

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

YouBike 2.0 還車點 :

+

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

+

2.中研院綜合體育館

+

3.研究院舊莊街口

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