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,125 @@
+"use client";
+
+import { Edit2, Copy, LogOut } from "lucide-react";
+import { useState } from "react";
+
+export default function ProfilePage() {
+  const [isEditing, setIsEditing] = useState(false);
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      {/* Header */}
+      <div className="mb-8 flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold mb-2">My Profile</h1>
+          <p className="text-gray-600">Manage your account</p>
+        </div>
+        <button
+          onClick={() => setIsEditing(!isEditing)}
+          className="flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition"
+        >
+          <Edit2 className="w-4 h-4" />
+          {isEditing ? "Done" : "Edit"}
+        </button>
+      </div>
+
+      {/* Profile Card */}
+      <div className="bg-white border border-gray-200 rounded-xl p-8 space-y-8 mb-8">
+        {/* Avatar & Basic Info */}
+        <div className="flex items-start gap-6">
+          <img
+            src="https://api.dicebear.com/7.x/avataaars/svg?seed=user"
+            alt="Profile"
+            className="w-24 h-24 rounded-xl"
+          />
+          <div className="flex-1 space-y-4">
+            <div>
+              <label className="text-sm font-semibold text-gray-600">Name</label>
+              <input
+                type="text"
+                defaultValue="John Doe"
+                disabled={!isEditing}
+                className="w-full px-4 py-2 border border-gray-200 rounded-lg disabled:bg-gray-50 focus:outline-none focus:border-black transition"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-semibold text-gray-600">Handle</label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  defaultValue="@johndoe"
+                  disabled={!isEditing}
+                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg disabled:bg-gray-50 focus:outline-none focus:border-black transition"
+                />
+                {isEditing && (
+                  <button className="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
+                    <Copy className="w-4 h-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Email */}
+        <div className="border-t border-gray-200 pt-6">
+          <label className="text-sm font-semibold text-gray-600">Email</label>
+          <input
+            type="email"
+            defaultValue="john@example.com"
+            disabled
+            className="w-full px-4 py-2 border border-gray-200 rounded-lg bg-gray-50 focus:outline-none mt-2"
+          />
+          <p className="text-xs text-gray-500 mt-2">Connected via Google OAuth</p>
+        </div>
+
+        {/* Bio */}
+        <div className="border-t border-gray-200 pt-6">
+          <label className="text-sm font-semibold text-gray-600">Bio</label>
+          <textarea
+            defaultValue="AI enthusiast and roleplay lover"
+            disabled={!isEditing}
+            rows={3}
+            className="w-full px-4 py-2 border border-gray-200 rounded-lg disabled:bg-gray-50 focus:outline-none focus:border-black transition resize-none mt-2"
+          />
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-4 mb-8">
+        <div className="bg-white border border-gray-200 rounded-xl p-6 text-center">
+          <div className="text-2xl font-bold">12</div>
+          <p className="text-sm text-gray-600 mt-2">Favorite Characters</p>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl p-6 text-center">
+          <div className="text-2xl font-bold">48</div>
+          <p className="text-sm text-gray-600 mt-2">Conversations</p>
+        </div>
+        <div className="bg-white border border-gray-200 rounded-xl p-6 text-center">
+          <div className="text-2xl font-bold">325</div>
+          <p className="text-sm text-gray-600 mt-2">Messages</p>
+        </div>
+      </div>
+
+      {/* Account Settings */}
+      <div className="bg-white border border-gray-200 rounded-xl p-8 space-y-4">
+        <h3 className="text-lg font-semibold mb-4">Account Settings</h3>
+        <button className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+          Change Password
+        </button>
+        <button className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+          Two-Factor Authentication
+        </button>
+        <button className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
+          Privacy Settings
+        </button>
+      </div>
+
+      {/* Logout */}
+      <button className="mt-8 w-full px-4 py-3 flex items-center justify-center gap-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
+        <LogOut className="w-5 h-5" />
+        Logout
+      </button>
+    </div>
+  );
+}