Grid List with Dropdown

1import { MoreVertical } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3import { Card, CardContent } from '@/components/ui/card';
4import {
5  DropdownMenu,
6  DropdownMenuContent,
7  DropdownMenuItem,
8  DropdownMenuSeparator,
9  DropdownMenuTrigger,
10} from '@/components/ui/dropdown-menu';
11 
12const bookCollections = [
13  { name: 'Science Fiction', initials: 'SF', href: '#', books: 37 },
14  { name: 'Mystery Thrillers', initials: 'MT', href: '#', books: 29 },
15  { name: 'Historical Fiction', initials: 'HF', href: '#', books: 23 },
16];
17 
18export default function GridList01() {
19  return (
20    <div className="flex items-center justify-center p-8">
21      <div>
22        <h2 className="text-balance font-medium text-muted-foreground text-sm">
23          Favorite Book Collections
24        </h2>
25        <ul
26          className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-3"
27          role="list"
28        >
29          {bookCollections.map((collection) => (
30            <li className="col-span-1" key={collection.name}>
31              <Card className="flex w-full flex-row gap-0 overflow-hidden rounded-md py-0 shadow-2xs">
32                <div className="flex w-16 shrink-0 items-center justify-center bg-primary font-medium text-primary-foreground text-sm">
33                  {collection.initials}
34                </div>
35                <CardContent className="flex flex-1 items-center justify-between truncate bg-card p-0">
36                  <div className="flex-1 truncate px-4 py-2 text-sm">
37                    <a
38                      className="font-medium text-foreground hover:text-muted-foreground"
39                      href={collection.href}
40                    >
41                      {collection.name}
42                    </a>
43                    <p className="text-pretty text-muted-foreground">
44                      {collection.books} Books
45                    </p>
46                  </div>
47                  <div className="shrink-0 pr-2">
48                    <DropdownMenu>
49                      <DropdownMenuTrigger
50                        render={
51                          <Button
52                            className="h-8 w-8 rounded-full"
53                            size="icon"
54                            type="button"
55                            variant="ghost"
56                          />
57                        }
58                      >
59                        <span className="sr-only">Open options</span>
60// … truncated