Avatar

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Avatar,
  AvatarGroup
} from "@pimolu/react";

const members = [
  { name: "Amélie Bernard", role: "Product designer" },
  { name: "Lucas Moreau", role: "Front-end engineer" },
  { name: "Sofia Rossi", role: "Design engineer" },
];
const widerTeam = [
  "Jean Dupont",
  "Marie Laurent",
  "Pimolu Developer",
  "Nicolas Martin",
  "Sophie Bernard",
];

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Team</CardTitle>
          <CardDescription>Members of the design system team.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            {
              members.map((member) => (<div
                key={member.name}
                className="flex flex-wrap items-center gap-3 min-w-0"
              >
                <Avatar name={member.name} size="sm" />
                <div>
                  <p>{member.name}</p>
                  <p className="text-sm text-muted leading-relaxed">{member.role}</p>
                </div>
              </div>))
            }
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Conversation</CardTitle>
          <CardDescription>Author of the latest reply.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <Avatar
              name="Amélie Bernard"
              src="/images/pimolu-avatar.svg"
              size="sm"
            />
            <div>
              <p>
                Amélie Bernard{" "}
                <span className="text-sm text-muted leading-relaxed">· 2 h ago</span>
              </p>
              <p className="text-sm text-muted leading-relaxed">
                The initials stay readable until the picture finishes loading.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Project members</CardTitle>
          <CardDescription>Five people, three visible, the rest counted.</CardDescription>
        </CardHeader>
        <CardContent>
          <AvatarGroup max={3} aria-label="Project members">
            {widerTeam.map((name) => (<Avatar key={name} name={name} />))}
          </AvatarGroup>
        </CardContent>
      </Card>
    </div>
  );
}