diff --git a/src/App.tsx b/src/App.tsx index 33d15f9..26dd1aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom'; import Layout from './components/Layout'; import HomePage from './pages/HomePage'; +import RegisterPage from "@/pages/RegisterPage"; export default function App() { return ( }> } /> + } /> ); diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 68475b0..b0e6dc9 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -27,7 +27,9 @@ export default function Layout() { }, { "name": "Testimonials", "href": "#testimonials" - } + }, + { name: "Register", href: "/register" }, + ]; return ( diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx new file mode 100644 index 0000000..0e4de9a --- /dev/null +++ b/src/pages/RegisterPage.tsx @@ -0,0 +1,168 @@ +import React, { useState } from "react"; +import { routes } from "@/routes"; +import Input from "@/components/ui/Input"; +import Label from "@/components/ui/Label"; +import Button from "@/components/ui/Button"; +import { Check } from "lucide-react"; + +export default function RegisterPage() { + const [step, setStep] = useState(1); + const [formData, setFormData] = useState({ + companyName: "", + email: "", + password: "", + theme: "light", + }); + + const handleNext = () => setStep((s) => Math.min(s + 1, 3)); + const handlePrev = () => setStep((s) => Math.max(s - 1, 1)); + const handleRegister = () => { + console.log("Mock Firebase Submission:"); console.log("-> Writing to 'tenant' collection:", { companyName: formData.companyName, theme: formData.theme }); console.log("-> Writing to 'registration' collection:", { email: formData.email, password: formData.password }); alert("登録が完了しました！ (Registration Complete)"); + }; + + const steps = [ + { id: 1, label: "基本情報" }, + { id: 2, label: "テーマ選択" }, + { id: 3, label: "完了" }, + ]; + + return ( +
+
+
+

新規アカウント登録

+ + {/* Stepper UI */} +
+
+
+ + {steps.map((s) => ( +
+
= s.id ?"bg-primary-cta text-primary-cta-text" + : "bg-card text-foreground/50 border-2 border-foreground/10" + }`} + > + {step > s.id ? : s.id} +
+ = s.id ?"text-foreground" : "text-foreground/50"}`}> + {s.label} + +
+ ))} +
+ + {/* Step 1: Basic Info */} + {step === 1 && ( +
+

ステップ 1: 基本情報

+
+ + setFormData({ ...formData, companyName: e.target.value })} + placeholder="株式会社蟹江電機" + /> +
+
+ + setFormData({ ...formData, email: e.target.value })} + placeholder="admin@example.com" + /> +
+
+ + setFormData({ ...formData, password: e.target.value })} + placeholder="••••••••" + /> +
+
+
+
+ )} + + {/* Step 2: Theme Selection */} + {step === 2 && ( +
+

ステップ 2: テーマ選択

+
+ {["light", "dark", "system"].map((t) => ( +
setFormData({ ...formData, theme: t })} + className={`p-4 border rounded-lg text-center cursor-pointer transition-all ${ formData.theme === t ?"border-primary-cta bg-primary-cta/10 text-primary-cta" + : "border-foreground/10 hover:bg-foreground/5 text-foreground" + }`} + > +
+ {t === "light" ? "ライト" : t === "dark" ? "ダーク" : "システム"} +
+
+ ))} +
+
+
+
+
+
+
+
+ )} + + {/* Step 3: Complete */} + {step === 3 && ( +
+
+ +
+

準備が完了しました

+

+ 以下の内容でテナントと管理者アカウントを作成します。 +

+ +
+
+ 企業名: + {formData.companyName || "未入力"} +
+
+ メール: + {formData.email || "未入力"} +
+
+ テーマ: + {formData.theme} +
+
+ +
+
+
+
+
+
+
+ )} +
+
+ +
+ ); +} \ No newline at end of file diff --git a/src/routes.ts b/src/routes.ts index 362ecb5..558b72e 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -6,4 +6,5 @@ export interface Route { export const routes: Route[] = [ { path: '/', label: 'Home', pageFile: 'HomePage' }, + { path: '/register', label: 'Register', pageFile: 'RegisterPage' }, ];