feat(pages): add profile page

fix(ui): fix minor ui bugs on some pages
This commit is contained in:
shafin-r
2026-01-19 14:06:05 +06:00
parent d208a9336f
commit d5a39add17
11 changed files with 154 additions and 116 deletions

View File

@ -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>
);
};