UserDetails.tsx•1.87 kB
import { Input } from "@/components/ui/input";
import { useTranslation } from "@/lib/i18n/server";
import { api } from "@/server/api/client";
import { Mail, User } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Label } from "../ui/label";
export default async function UserDetails() {
// oxlint-disable-next-line rules-of-hooks
const { t } = await useTranslation();
const whoami = await api.users.whoami();
return (
<Card>
<CardHeader>
<div className="flex items-center space-x-4">
<div className="space-y-1">
<CardTitle className="flex items-center gap-2 text-xl">
<User className="h-5 w-5" />
{t("settings.info.basic_details")}
</CardTitle>
</div>
</div>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid gap-6 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="name" className="text-sm font-medium">
{t("common.name")}
</Label>
<Input
id="name"
defaultValue={whoami.name ?? ""}
className="h-11"
disabled
/>
</div>
<div className="space-y-2">
<Label
htmlFor="email"
className="flex items-center gap-2 text-sm font-medium"
>
<Mail className="h-4 w-4" />
{t("common.email")}
</Label>
<div className="relative">
<Input
id="email"
type="email"
defaultValue={whoami.email ?? ""}
className="h-11"
disabled
/>
</div>
</div>
</div>
</CardContent>
</Card>
);
}