Grid List with Links

1import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
2import { Card, CardContent } from '@/components/ui/card';
3 
4const people = [
5  {
6    name: 'Timur Ercan',
7    email: 'timur@documenso.com',
8    role: 'Co-Founder / CEO',
9    imageUrl: 'https://blocks.so/avatar-02.png',
10  },
11  {
12    name: 'Lucas Smith',
13    email: 'lucas@documenso.com',
14    role: 'Co-Founder / CTO',
15    imageUrl: 'https://blocks.so/avatar-03.png',
16  },
17  {
18    name: 'Ephraim Duncan',
19    email: 'ephraim@documenso.com',
20    role: 'Software Engineer',
21    imageUrl: 'https://blocks.so/avatar-01.png',
22  },
23  {
24    name: 'Catalin Pit',
25    email: 'catalin@documenso.com',
26    role: 'Software Engineer',
27    imageUrl: 'https://blocks.so/avatar-04.png',
28  },
29];
30 
31export default function GridList02() {
32  return (
33    <div className="flex items-center justify-center p-8">
34      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
35        {people.map((person) => (
36          <Card
37            className="relative border py-0 shadow-2xs transition-[border-color,box-shadow] duration-100 ease-out focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 hover:border-muted-foreground hover:shadow-sm"
38            key={person.email}
39          >
40            <CardContent className="flex items-center space-x-4 p-4">
41              <Avatar className="h-10 w-10">
42                <AvatarImage alt={person.name} src={person.imageUrl} />
43                <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
44              </Avatar>
45              <div className="min-w-0 flex-1">
46                <a className="focus:outline-none" href="#">
47                  <span aria-hidden="true" className="absolute inset-0" />
48                  <p className="text-pretty font-medium text-foreground text-sm">
49                    {person.name}
50                  </p>
51                  <p className="truncate text-pretty text-muted-foreground text-sm">
52                    {person.role}
53                  </p>
54                </a>
55              </div>
56            </CardContent>
57          </Card>
58        ))}
59      </div>
60    </div>
61  );
62}