51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { FiLogOut, FiUser } from "react-icons/fi";
|
|
import { Link } from "react-router-dom";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import Avatar from "@/components/ui/Avatar";
|
|
import Card from "@/components/ui/Card";
|
|
import EmptyState from "@/components/ui/EmptyState";
|
|
|
|
export default function ProfilePage() {
|
|
const { t } = useTranslation("social");
|
|
const { user } = useAuth();
|
|
|
|
if (!user) return <EmptyState icon={<FiUser />} title="—" />;
|
|
|
|
return (
|
|
<div>
|
|
<header className="sticky top-0 z-10 border-b border-brand-lines/10 bg-brand-bg/80 px-4 py-3 backdrop-blur">
|
|
<h1 className="text-lg font-bold text-brand-text">{t("nav.profile")}</h1>
|
|
</header>
|
|
|
|
<div className="p-4">
|
|
<Card className="flex items-center gap-4">
|
|
<Avatar name={user.username || user.email} size={64} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-lg font-semibold text-brand-text">
|
|
@{user.username}
|
|
</div>
|
|
{user.email && (
|
|
<div className="truncate text-sm text-brand-text/60">{user.email}</div>
|
|
)}
|
|
{(user.first_name || user.last_name) && (
|
|
<div className="text-sm text-brand-text/70">
|
|
{[user.first_name, user.last_name].filter(Boolean).join(" ")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="mt-4 flex justify-end">
|
|
<Link
|
|
to="/social/logout"
|
|
className="inline-flex items-center gap-2 rounded-xl border border-brand-lines/20 px-3 py-2 text-sm text-brand-text/80 hover:bg-brand-lines/10 hover:text-brand-accent"
|
|
>
|
|
<FiLogOut size={16} /> {t("nav.logout")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|