feat: add RepliesPage component with styling

Author: Kyle9410-Chen

src/features/form/components/AdminFormDetailPages/RepliesPage.module.css

@@ -0,0 +1,22 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.wrapper {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.status {
+	color: var(--green);
+	background-color: var(--green-subtle);
+	border-radius: 0;
+	clip-path: polygon(0.25rem 0, 100% 0, 100% 0, calc(100% - 0.25rem) 100%, 0 100%, 0 100%);
+}
+
+.checkButton {
+	background-color: white;
+}

src/features/form/components/AdminFormDetailPages/RepliesPage.tsx

@@ -0,0 +1,29 @@
+import { Badge, Button, Input } from "@/shared/components";
+import { Repeat2, SquareArrowOutUpRight } from "lucide-react";
+import styles from "./RepliesPage.module.css";
+
+export const AdminFormRepliesPage = () => {
+	return (
+		<div className={styles.container}>
+			<div className={styles.wrapper}>
+				<h2>回覆蒐集</h2>
+				<Badge className={styles.status} variant="success" showDot>
+					已連結 Google Sheets
+				</Badge>
+			</div>
+			<p>請將以下服務帳號加入您的 Google Sheets 編輯權限：</p>
+			<Input value="your-service-account@example.com" readOnly></Input>
+			<Input value="sss" readOnly></Input>
+			<div className={styles.wrapper}>
+				<Button className={styles.checkButton} variant="primary">
+					<Repeat2 />
+					檢查狀態
+				</Button>
+				<Button variant="primary">
+					<SquareArrowOutUpRight />
+					檢視表單
+				</Button>
+			</div>
+		</div>
+	);
+};