feat(pages): add profile page
fix(ui): fix minor ui bugs on some pages
This commit is contained in:
@ -1,26 +1,72 @@
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const Profile = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = () => {
|
||||
useAuthStore.getState().logout();
|
||||
navigate("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">Profile</h2>
|
||||
<div className="space-y-2 text-gray-600">
|
||||
<p>Email: {user?.email}</p>
|
||||
<p>Role: {user?.role}</p>
|
||||
<p>Status: {user?.status}</p>
|
||||
<p>
|
||||
Member since:{" "}
|
||||
{user?.joined_at
|
||||
? new Date(user.joined_at).toLocaleDateString()
|
||||
: "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
|
||||
<h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
|
||||
<section>
|
||||
<h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>
|
||||
<p className="text-lg font-satoshi">{user?.email}</p>
|
||||
</section>
|
||||
<section className="space-y-4">
|
||||
<h5 className="text-[12px] font-satoshi-bold text-gray-400">ACCOUNT</h5>
|
||||
<div className="border rounded-4xl">
|
||||
<button className="w-full rounded-t-4xl border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Account details</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Redeem a code</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Manage subscription</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Preferences</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-4">
|
||||
<h5 className="text-[12px] font-satoshi-bold text-gray-400">LEGAL</h5>
|
||||
<div className="border rounded-4xl">
|
||||
<button className="w-full border-b rounded-t-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Terms of Use</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
<button className="w-full border-b rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Privacy Policy</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-4">
|
||||
<h5 className="text-[12px] font-satoshi-bold text-gray-400">SUPPORT</h5>
|
||||
<div className="border rounded-4xl">
|
||||
<button className="w-full rounded-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
|
||||
<span className="font-satoshi text-black">Contact Us</span>
|
||||
<ChevronRight color="gray" size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full border rounded-4xl bg-purple-500 py-4 px-4 flex justify-center items-center active:bg-purple-600 font-satoshi-medium text-white"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user