Notes

import React from 'react';
import { Users, Mail, UserCircle, Search, Bell, Settings, ChevronDown } from 'lucide-react';

// Mock user data
const users = [
{ id: 1, name: 'Sarah Johnson', email: '[email protected]', role: 'Administrator', lastActive: '2 hours ago' },
{ id: 2, name: 'Michael Chen', email: '[email protected]', role: 'Editor', lastActive: '5 hours ago' },
{ id: 3, name: 'Emma Wilson', email: '[email protected]', role: 'Author', lastActive: '1 day ago' },
{ id: 4, name: 'James Rodriguez', email: '[email protected]', role: 'Contributor', lastActive: '3 days ago' },
];

function App() {
return (
<div className="min-h-screen bg-gray-100">
{/* Top Navigation Bar */}
<nav className="bg-white border-b border-gray-200">
<div className="px-4 mx-auto">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<span className="text-xl font-semibold text-gray-800">WP Admin</span>
</div>
<div className="flex items-center space-x-4">
<button className="p-2 text-gray-500 hover:text-gray-700">
<Bell size={20} />
</button>
<button className="flex items-center space-x-2 text-gray-700">
<img
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=32&h=32&q=80"
alt="Profile"
className="w-8 h-8 rounded-full"
/>
<ChevronDown size={16} />
</button>
</div>
</div>
</div>
</nav>

<div className="flex">
{/* Sidebar */}
<div className="w-64 min-h-screen bg-white border-r border-gray-200">
<div className="p-4">
<div className="relative">
<input
type="text"
placeholder="Search users..."
className="w-full px-4 py-2 pl-10 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Search className="absolute left-3 top-2.5 text-gray-400" size={18} />
</div>
</div>
<nav className="mt-4">
<a href="#" className="flex items-center px-4 py-2 text-blue-600 bg-blue-50">
<Users className="mr-3" size={20} />
<span>Users</span>
</a>
<a href="#" className="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50">
<Settings className="mr-3" size={20} />
<span>Settings</span>
</a>
</nav>
</div>

{/* Main Content */}
<div className="flex-1 p-8">
<div className="mb-8">
<h1 className="text-2xl font-bold text-gray-900">Users</h1>
<p className="mt-1 text-sm text-gray-500">Manage your website users and their roles</p>
</div>

<div className="bg-white rounded-lg shadow">
<div className="p-6">
{users.map((user) => (
<div
key={user.id}
className="flex items-center justify-between p-4 border-b border-gray-200 last:border-0"
>
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<UserCircle className="w-10 h-10 text-gray-400" />
</div>
<div>
<h3 className="text-lg font-medium text-gray-900">{user.name}</h3>
<div className="flex items-center mt-1 space-x-2 text-sm text-gray-500">
<Mail size={16} />
<span>{user.email}</span>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<span className="px-3 py-1 text-sm text-blue-600 bg-blue-100 rounded-full">
{user.role}
</span>
<span className="text-sm text-gray-500">Last active: {user.lastActive}</span>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
}

export default App;