Member list

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Badge,
  Button,
  Card,
  CardHeader,
  CardTitle,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Separator,
} from "@cronus-ui/ui";
import { TEAM, type Role } from "../lib/demo-saas.js";
import { MoreHorizontal, UserMinus, Users } from "lucide-react";

const ROLE_VARIANT: Record<Role, "primary" | "info" | "secondary"> = {
  Owner: "primary",
  Admin: "info",
  Member: "secondary",
};

export function TeamBlock() {
  return (
    <Card className="mx-auto w-full max-w-xl gap-0 py-0 shadow-md">
      <CardHeader className="items-center px-6 py-5">
        <div className="flex flex-col gap-1">
          <CardTitle className="font-display text-lg">Team members</CardTitle>
          <p className="text-sm text-fg-secondary">Invite and manage your workspace teammates.</p>
        </div>
        <Button variant="primary" size="sm" className="col-start-2 row-span-2 self-center">
          <Users className="size-4" aria-hidden="true" />
          Invite
        </Button>
      </CardHeader>

      <Separator />

      <ul className="flex flex-col">
        {TEAM.map((member, i) => (
          <li
            key={member.id}
            className={`flex items-center gap-4 px-6 py-4 transition-colors hover:bg-surface-overlay/60 ${
              i !== TEAM.length - 1 ? "border-b border-border" : ""
            }`}
          >
            <Avatar>
              {member.avatar ? <AvatarImage src={member.avatar} alt={member.name} /> : null}
              <AvatarFallback>{member.initials}</AvatarFallback>
            </Avatar>

            <div className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-sm font-medium text-fg">{member.name}</span>
              <span className="truncate text-sm text-fg-secondary">{member.email}</span>
            </div>

            <Badge variant={ROLE_VARIANT[member.role]}>{member.role}</Badge>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon-sm" aria-label={`Actions for ${member.name}`}>
                  <MoreHorizontal className="size-4" aria-hidden="true" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuLabel>{member.name}</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Users className="size-4" aria-hidden="true" />
                  Change role
                </DropdownMenuItem>
                <DropdownMenuItem className="text-error focus:text-error">
                  <UserMinus className="size-4" aria-hidden="true" />
                  Remove
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </li>
        ))}
      </ul>
    </Card>
  );
}