fix app direction: no more app loops

2026-05-19 21:50:36 +08:00
parent bad60cbf91
commit 76f1b8298a
11 changed files with 0 additions and 0 deletions
@@ -0,0 +1,117 @@
+"use client";
+
+import { Save, Bell, Lock } from "lucide-react";
+import { useState } from "react";
+
+export default function SettingsPage() {
+  const [settings, setSettings] = useState({
+    emailNotifications: true,
+    pushNotifications: false,
+    marketingEmails: false,
+    publicProfile: true,
+    dataCollection: true,
+  });
+
+  const handleToggle = (key: keyof typeof settings) => {
+    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">Settings</h1>
+        <p className="text-gray-600">Manage your preferences</p>
+      </div>
+
+      {/* Notification Settings */}
+      <div className="bg-white border border-gray-200 rounded-xl p-8 mb-6">
+        <div className="flex items-center gap-3 mb-6">
+          <Bell className="w-6 h-6" />
+          <h3 className="text-lg font-semibold">Notifications</h3>
+        </div>
+
+        <div className="space-y-4">
+          {[
+            {
+              key: "emailNotifications" as const,
+              label: "Email Notifications",
+              desc: "Receive updates about new characters and messages",
+            },
+            {
+              key: "pushNotifications" as const,
+              label: "Push Notifications",
+              desc: "Get notifications on your device",
+            },
+            {
+              key: "marketingEmails" as const,
+              label: "Marketing Emails",
+              desc: "Receive promotional content and special offers",
+            },
+          ].map((item) => (
+            <div key={item.key} className="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
+              <div>
+                <p className="font-medium">{item.label}</p>
+                <p className="text-sm text-gray-600">{item.desc}</p>
+              </div>
+              <label className="relative inline-flex cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={settings[item.key]}
+                  onChange={() => handleToggle(item.key)}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black"></div>
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Privacy Settings */}
+      <div className="bg-white border border-gray-200 rounded-xl p-8 mb-6">
+        <div className="flex items-center gap-3 mb-6">
+          <Lock className="w-6 h-6" />
+          <h3 className="text-lg font-semibold">Privacy</h3>
+        </div>
+
+        <div className="space-y-4">
+          {[
+            {
+              key: "publicProfile" as const,
+              label: "Public Profile",
+              desc: "Allow other users to see your profile",
+            },
+            {
+              key: "dataCollection" as const,
+              label: "Data Collection",
+              desc: "Allow us to collect usage data for improvements",
+            },
+          ].map((item) => (
+            <div key={item.key} className="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
+              <div>
+                <p className="font-medium">{item.label}</p>
+                <p className="text-sm text-gray-600">{item.desc}</p>
+              </div>
+              <label className="relative inline-flex cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={settings[item.key]}
+                  onChange={() => handleToggle(item.key)}
+                  className="sr-only peer"
+                />
+                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-black rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black"></div>
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Save Button */}
+      <button className="flex items-center justify-center gap-2 w-full px-6 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition">
+        <Save className="w-5 h-5" />
+        Save Settings
+      </button>
+    </div>
+  );
+}