84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
|
|
import { useTranslation } from "@turbostarter/i18n";
|
|
import { cn } from "@turbostarter/ui";
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@turbostarter/ui-web/avatar";
|
|
import { Badge } from "@turbostarter/ui-web/badge";
|
|
import { Icons } from "@turbostarter/ui-web/icons";
|
|
|
|
import { authClient } from "~/lib/auth/client";
|
|
import { admin } from "~/modules/admin/lib/api";
|
|
import {
|
|
DashboardHeader,
|
|
DashboardHeaderTitle,
|
|
DashboardHeaderDescription,
|
|
} from "~/modules/common/layout/dashboard/header";
|
|
|
|
import { Ban } from "./actions/ban";
|
|
import { Delete } from "./actions/delete";
|
|
import { Impersonate } from "./actions/impersonate";
|
|
|
|
interface UserHeaderProps {
|
|
readonly id: string;
|
|
}
|
|
|
|
export const UserHeader = ({ id }: UserHeaderProps) => {
|
|
const { t } = useTranslation("common");
|
|
const session = authClient.useSession();
|
|
const { data: user } = useQuery(admin.queries.users.get({ id }));
|
|
|
|
return (
|
|
<DashboardHeader>
|
|
<div className="flex min-w-0 items-center gap-4">
|
|
<Avatar className="size-12">
|
|
<AvatarImage src={user?.image ?? undefined} alt={user?.name ?? ""} />
|
|
<AvatarFallback>
|
|
<Icons.UserRound className="w-7" />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<DashboardHeaderTitle className="truncate">
|
|
{user?.name}
|
|
</DashboardHeaderTitle>
|
|
{user?.isAnonymous && (
|
|
<Badge variant="outline">{t("anonymous")}</Badge>
|
|
)}
|
|
{user?.id === session.data?.user.id && (
|
|
<Badge variant="outline">{t("you")}</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<DashboardHeaderDescription>
|
|
{user?.email}
|
|
</DashboardHeaderDescription>
|
|
<Badge
|
|
className={cn({
|
|
"bg-success/15 text-success hover:bg-success/25":
|
|
user?.emailVerified,
|
|
"bg-destructive/15 text-destructive hover:bg-destructive/25":
|
|
!user?.emailVerified,
|
|
})}
|
|
>
|
|
{user?.emailVerified ? t("verified") : t("unverified")}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Impersonate id={id} />
|
|
<Ban id={id} />
|
|
<Delete id={id} />
|
|
</div>
|
|
</DashboardHeader>
|
|
);
|
|
};
|