feat: add MTR display board and train info components

- Implemented MtrDisplayBoard component to show train schedules with weather information.
- Created MtrTrainInfo component to manage state and render MtrDisplayBoard.
- Added ScreenshotTaker component for downloading screenshots of the display board.
- Introduced theme toggle functionality with ThemeToggle component.
- Developed various UI components including Button, Card, ColorPicker, DropdownMenu, Input, Label, Popover, Select, Separator, Switch, Tabs, and Textarea.
- Added utility functions for class name merging and tool definitions.

src/components/rt-guide/mtr-train-info.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { BoardData } from "@/app/rt-guide/types";
+import { MtrDisplayBoard } from "./mtr-display-board";
+import { MtrBoardForm } from "./mtr-board-form";
+import { ScreenshotTaker } from "@/components/screenshot-taker";
+
+const initialData: BoardData = {
+  statusBar: {
+    weather: "sunny",
+    temperature: "34",
+    time: "13:21",
+  },
+  trains: [
+    {
+      destination: { en: "Wangjiazhuang", cn: "王家庄" },
+      platform: "3",
+      type: "rapid",
+      arrival: "Arriving",
+    },
+    {
+      destination: { en: "Tangjiatuo", cn: "唐家坨" },
+      platform: "3",
+      type: "express",
+      arrival: "3 min",
+    },
+    {
+      destination: { en: "Yuetong North Road", cn: "悦港北路" },
+      platform: "3",
+      type: "local",
+      arrival: "7 min",
+    },
+    {
+      destination: { en: "Shiqiaopu", cn: "石桥铺" },
+      platform: "3",
+      type: "through",
+      arrival: "10 min",
+    },
+  ],
+  theme: {
+    statusBarColor: "#0033A0",
+    statusBarTextColor: "#FFFFFF",
+    oddRowColor: "#0099CC",
+    evenRowColor: "#33CCCC",
+    textColor: "#FFFFFF",
+    platformBackgroundColor: "#00529B",
+    platformTextColor: "#FFFFFF",
+    trainTypeColors: {
+      local: "rgba(0, 0, 0, 0.2)",
+      express: "#D93A3A",
+      rapid: "#F2B705",
+      through: "#00A651",
+    },
+  },
+  lang: "en",
+};
+
+export function MtrTrainInfo() {
+  const [data, setData] = useState<BoardData>(initialData);
+
+  return (
+    <div className="grid md:grid-cols-2 gap-8">
+      <MtrBoardForm data={data} setData={setData} />
+      <div className="flex flex-col items-center">
+        <ScreenshotTaker fileName="mtr-guide.png">
+          <MtrDisplayBoard data={data} />
+        </ScreenshotTaker>
+      </div>
+    </div>
+  );
+}