62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
'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>
|
|
)
|
|
|
|
} |