Skip the UI boilerplate.
Focus on backend logic.

import React, { useState } from 'react';
import { User, Shield, CheckCircle } from 'lucide-react';

export interface UserRowProps {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'editor' | 'viewer';
  status: 'active' | 'pending';
}

export function UserTableItem({ user }: { user: UserRowProps }) {
  const [isActive, setIsActive] = useState(user.status === 'active');

  return (
    <div className="flex items-center justify-between p-3.5 rounded-xl border border-border/60 bg-card hover:border-primary/40 transition-colors">
      <div className="flex items-center gap-3">
        <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center text-primary font-bold">
          {user.name[0]}
        </div>
        <div>
          <p className="text-xs font-bold text-foreground">{user.name}</p>
          <p className="text-[10px] text-muted-foreground font-mono">{user.email}</p>
        </div>
      </div>
      <span className="px-2.5 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-600">
        {user.role}
      </span>
    </div>
  );
}