feat: implement dynamic mobile header with centered page title and adaptive layout
This commit is contained in:
62
app/(backend)/users/components/UserMobileCard/index.tsx
Normal file
62
app/(backend)/users/components/UserMobileCard/index.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import { MoreVertical, Mail, Shield, Calendar } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface UserMobileCardProps {
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
joinedAt?: string;
|
||||
status: 'active' | 'inactive';
|
||||
}
|
||||
|
||||
export const UserMobileCard: React.FC<UserMobileCardProps> = ({ name, email, role, joinedAt, status }) => {
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-4 shadow-sm md:hidden active:scale-[0.99] transition-all">
|
||||
{/* Header section */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Avatar will be here */}
|
||||
<div className="size-11 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
|
||||
<span className="text-primary font-bold text-sm">
|
||||
{name.split(" ").map(n => n[0]).join("")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-foreground leading-none">{name}</span>
|
||||
<span className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
|
||||
<Mail className="size-3" />
|
||||
{email}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Badge
|
||||
variant={status === "active" ? "default" : "secondary"}
|
||||
className="text-[10px] px-2 py-0 h-5"
|
||||
>
|
||||
{status}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Footer section: role and options */}
|
||||
<div className="flex items-center justify-between mt-5 pt-3 border-t border-border/50">
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<Shield className="size-3 text-primary/70" />
|
||||
<span>Role: <b className="text-foreground font-medium">{role}</b></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/80">
|
||||
<Calendar className="size-3" />
|
||||
<span>Joined: {joinedAt}</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon-xs" className="text-muted-foreground">
|
||||
<MoreVertical className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -3,103 +3,134 @@
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Search, Plus, MoreVertical, Filter } from "lucide-react";
|
||||
import { UserMobileCard } from "./components/UserMobileCard";
|
||||
|
||||
const tempUsers = [
|
||||
{ id: 1, name: "John Doe", email: "john@example.com", role: "Admin", joinedAt: "2023-01-01", status: "active" },
|
||||
{ id: 2, name: "Alice Smith", email: "alice@test.com", role: "Editor", joinedAt: "2023-02-15", status: "active" },
|
||||
{ id: 3, name: "Bob Johnson", email: "bob@community.com", role: "Member", joinedAt: "2023-03-10", status: "inactive" },
|
||||
{ id: 4, name: "Charlie Brown", email: "charlie@community.com", role: "Member", joinedAt: "2023-04-20", status: "active" },
|
||||
];
|
||||
|
||||
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="outline" size="sm" onClick={() => setOpen(true)}>
|
||||
<Plus />
|
||||
Add User
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 md:gap-10 p-0">
|
||||
|
||||
{/* 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>
|
||||
{/* Header: Title + Button for Desktop only */}
|
||||
<div className="hidden md:flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-white">
|
||||
Users
|
||||
</h1>
|
||||
<p className="hidden md:block text-muted-foreground text-lg mt-3 max-w-2xl">
|
||||
Manage your community members, roles, and permissions here.
|
||||
</p>
|
||||
</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>
|
||||
{/* Кнопка: на мобилке круглая, на десктопе — солидная и яркая */}
|
||||
<Button
|
||||
variant="default"
|
||||
className="bg-secondary hover:bg-secondary/90 border border-border rounded-lg cursor-pointer">
|
||||
<Plus className="text-muted-foreground size-5 mr-2" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Add New User
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Search + Filter */}
|
||||
<div className="flex gap-3 md:gap-4">
|
||||
<div className="relative w-full group">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<input
|
||||
className="w-full bg-card border border-border rounded-lg py-1 pl-10 pr-12 focus:outline-1"
|
||||
placeholder="Search users..."
|
||||
/>
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8 md:size-10 hover:bg-muted text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Filter className="size-4 md:size-5" />
|
||||
<span className="sr-only">Filters</span>
|
||||
</Button>
|
||||
</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>
|
||||
<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">Ivan Ivanowitsch</div>
|
||||
<div className="text-xs text-muted-foreground">ivan@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-sm text-muted-foreground">User</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-red-500/10 text-red-500">not active</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-muted-foreground">May 20, 2025</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>
|
||||
{/* Кнопка: на мобилке круглая, на десктопе — солидная и яркая */}
|
||||
<Button
|
||||
variant="default"
|
||||
className="md:hidden bg-secondary rounded-lg text-muted-foreground border border-border"
|
||||
>
|
||||
<Plus className="size-6 md:size-5 md:mr-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- For Mobile Phones --- */}
|
||||
<div className="flex flex-col gap-4 md:hidden">
|
||||
{tempUsers.map((user) => (
|
||||
<UserMobileCard
|
||||
key={user.id}
|
||||
name={user.name}
|
||||
email={user.email}
|
||||
role={user.role}
|
||||
joinedAt={user.joinedAt}
|
||||
status={user.status as "active" | "inactive"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Users List / Table */}
|
||||
<div className="hidden md:block 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 */}
|
||||
{tempUsers.map((user) => (
|
||||
<tr key={user.id} 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">{user.name.charAt(0)}</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-foreground">{user.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className="text-sm text-muted-foreground">{user.role}</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 ${user.status === "active"
|
||||
? "bg-green-500/10 text-green-500"
|
||||
: "bg-red-500/10 text-red-500"}`}>
|
||||
{user.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-muted-foreground">{user.joinedAt}</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>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user