Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 70x 5x 2x 1x | import { Ban, CheckCircle } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Input } from "../ui/input";
import type { AdminUser } from "../../lib/api";
interface UserInfoCardProps {
user: AdminUser;
onUpdateField: (field: keyof AdminUser, value: unknown) => void;
}
export function UserInfoCard({ user, onUpdateField }: UserInfoCardProps) {
return (
<>
<Card>
<CardHeader>
<CardTitle className="text-lg">User Information</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<label
htmlFor="user-name"
className="block text-sm font-medium text-foreground-default mb-1"
>
Name
</label>
<Input
id="user-name"
value={user.name}
onChange={(e) => onUpdateField("name", e.target.value)}
/>
</div>
<div>
<label
htmlFor="user-email"
className="block text-sm font-medium text-foreground-default mb-1"
>
Email
</label>
<Input
id="user-email"
type="email"
value={user.email}
onChange={(e) => onUpdateField("email", e.target.value)}
/>
</div>
<div>
<label
htmlFor="user-phone"
className="block text-sm font-medium text-foreground-default mb-1"
>
Phone Number
</label>
<Input
id="user-phone"
value={user.phoneNumber || ""}
onChange={(e) => onUpdateField("phoneNumber", e.target.value)}
placeholder="91XXXXXXXXXX"
/>
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-lg">Info</CardTitle>
</CardHeader>
<CardContent className="space-y-4 text-sm">
<div className="flex justify-between">
<span className="text-foreground-muted">User ID</span>
<span className="font-mono text-foreground-default">{user.id}</span>
</div>
<div className="flex justify-between">
<span className="text-foreground-muted">Status</span>
{user.banned ? (
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-error-light text-error">
<Ban className="h-3 w-3" />
Banned
</span>
) : (
<span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-success-light text-success">
<CheckCircle className="h-3 w-3" />
Active
</span>
)}
</div>
{user.banned && user.banReason && (
<div className="flex justify-between">
<span className="text-foreground-muted">Ban Reason</span>
<span className="text-error">{user.banReason}</span>
</div>
)}
<div className="flex justify-between">
<span className="text-foreground-muted">Email Verified</span>
<span
className={`font-medium ${user.emailVerified ? "text-success" : "text-warning"}`}
>
{user.emailVerified ? "Yes" : "No"}
</span>
</div>
<div className="flex justify-between">
<span className="text-foreground-muted">Created</span>
<span className="text-foreground-default">
{new Date(user.createdAt).toLocaleString()}
</span>
</div>
<div className="flex justify-between">
<span className="text-foreground-muted">Updated</span>
<span className="text-foreground-default">
{new Date(user.updatedAt).toLocaleString()}
</span>
</div>
</CardContent>
</Card>
</>
);
}
|