46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
|
|
import { Users, UserCheck, UserX } from 'lucide-react'
|
|
|
|
export function UserStats() {
|
|
return (
|
|
<>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Users</CardTitle>
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">1,234</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
+20.1% from last month
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Users</CardTitle>
|
|
<UserCheck className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">1,105</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
89.5% of total users
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Inactive Users</CardTitle>
|
|
<UserX className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">129</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
10.5% of total users
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)
|
|
}
|