82 lines
3.8 KiB
TypeScript
82 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Search, Plus, MoreVertical, Filter } from "lucide-react";
|
|
|
|
export default function UsersPage() {
|
|
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight text-foreground">Users</h1>
|
|
<p className="text-muted-foreground mt-1">Manage your community members and their permissions.</p>
|
|
</div>
|
|
<Button variant="default" size="sm" onClick={() => setOpen(true)}>
|
|
<Plus />
|
|
Add User
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Filters & Search */}
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<input
|
|
className="w-full bg-card border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
|
|
placeholder="Search users by name or email..."
|
|
/>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Filter className="mr-2" />
|
|
Filters
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Users List / Table */}
|
|
<div className="bg-card border border-border rounded-xl overflow-hidden shadow-sm">
|
|
<table className="w-full text-left">
|
|
<thead className="bg-muted/50 border-b border-border">
|
|
<tr>
|
|
<th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">User</th>
|
|
<th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Role</th>
|
|
<th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Status</th>
|
|
<th className="px-6 py-3 text-xs font-semibold uppercase text-muted-foreground tracking-wider">Joined</th>
|
|
<th className="px-6 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{/* Example Row */}
|
|
<tr className="hover:bg-muted/20 transition-colors cursor-pointer">
|
|
<td className="px-6 py-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">John Doe</div>
|
|
<div className="text-xs text-muted-foreground">john@example.com</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="text-sm text-muted-foreground">Administrator</span>
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-500">Active</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-muted-foreground">Jan 29, 2026</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<button className="p-2 hover:bg-muted rounded-full transition-colors">
|
|
<MoreVertical className="w-4 h-4 text-muted-foreground" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |