45 lines
2.1 KiB
TypeScript
45 lines
2.1 KiB
TypeScript
import { type ExtendedUser } from '@/config/auth'
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
interface UserInfoProps {
|
|
user?: ExtendedUser
|
|
label: string
|
|
}
|
|
|
|
export const UserInfo = ({ user, label }: UserInfoProps) => {
|
|
return (
|
|
<Card className={`max-w-[430px] w-full sm:min-w-[430px] shadow-md`}>
|
|
<CardHeader>
|
|
<p className="text-2xl font-semibold text-center">
|
|
{label}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
|
|
<span className="text-sm font-medium">ID</span>
|
|
<span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.id}</span>
|
|
</div>
|
|
<div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
|
|
<span className="text-sm font-medium">Name</span>
|
|
<span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.name}</span>
|
|
</div>
|
|
<div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
|
|
<span className="text-sm font-medium">Email</span>
|
|
<span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.email}</span>
|
|
</div>
|
|
<div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
|
|
<span className="text-sm font-medium">Role</span>
|
|
<span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.role}</span>
|
|
</div>
|
|
<div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
|
|
<span className="text-sm font-medium">Two factor authentication</span>
|
|
<Badge variant={user?.isTwoFactorEnabled ? 'success' : 'destructive'}>
|
|
{user?.isTwoFactorEnabled ? 'ON' : 'OFF'}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|