73 lines
3.4 KiB
TypeScript
73 lines
3.4 KiB
TypeScript
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 (
|
|
<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>
|
|
</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>
|
|
);
|
|
};
|