Grid List

import { MoreVertical } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const bookCollections = [
  { name: "Science Fiction", initials: "SF", href: "#", books: 37 },
  { name: "Mystery Thrillers", initials: "MT", href: "#", books: 29 },
  { name: "Historical Fiction", initials: "HF", href: "#", books: 23 },
]

export default function GridList01() {
  return (
    <div className="flex items-center justify-center p-8">
      <div>
        <h2 className="text-balance font-medium text-muted-foreground text-sm">
          Favorite Book Collections
        </h2>
        <ul
          className="mt-3 grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-3"
          role="list"
        >
          {bookCollections.map((collection) => (
            <li className="col-span-1" key={collection.name}>
              <Card className="flex w-full flex-row gap-0 overflow-hidden rounded-md py-0 shadow-2xs">
                <div className="flex w-16 shrink-0 items-center justify-center bg-primary font-medium text-primary-foreground text-sm">
                  {collection.initials}
                </div>
                <CardContent className="flex flex-1 items-center justify-between truncate bg-card p-0">
                  <div className="flex-1 truncate px-4 py-2 text-sm">
                    <a
                      className="font-medium text-foreground hover:text-muted-foreground"
                      href={collection.href}
                    >
                      {collection.name}
                    </a>
                    <p className="text-pretty text-muted-foreground">
                      {collection.books} Books
                    </p>
                  </div>
                  <div className="shrink-0 pr-2">
                    <DropdownMenu>
                      <DropdownMenuTrigger
                        render={
                          <Button
                            className="h-8 w-8 rounded-full"
                            size="icon"
                            type="button"
                            variant="ghost"
                          />
                        }
                      >
                        <span className="sr-only">Open options</span>
                        <MoreVertical className="h-5 w-5" />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>View collection</DropdownMenuItem>
                        <DropdownMenuItem>Edit collection</DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>Share collection</DropdownMenuItem>
                        <DropdownMenuItem className="text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive">
                          Delete collection
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardContent>
              </Card>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"

const people = [
  {
    name: "Timur Ercan",
    email: "timur@documenso.com",
    role: "Co-Founder / CEO",
    imageUrl: "https://blocks.so/avatar-02.png",
  },
  {
    name: "Lucas Smith",
    email: "lucas@documenso.com",
    role: "Co-Founder / CTO",
    imageUrl: "https://blocks.so/avatar-03.png",
  },
  {
    name: "Ephraim Duncan",
    email: "ephraim@documenso.com",
    role: "Software Engineer",
    imageUrl: "https://blocks.so/avatar-01.png",
  },
  {
    name: "Catalin Pit",
    email: "catalin@documenso.com",
    role: "Software Engineer",
    imageUrl: "https://blocks.so/avatar-04.png",
  },
]

export default function GridList02() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        {people.map((person) => (
          <Card
            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"
            key={person.email}
          >
            <CardContent className="flex items-center space-x-4 p-4">
              <Avatar className="h-10 w-10">
                <AvatarImage alt={person.name} src={person.imageUrl} />
                <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="min-w-0 flex-1">
                <a className="focus:outline-none" href="#">
                  <span aria-hidden="true" className="absolute inset-0" />
                  <p className="text-pretty font-medium text-foreground text-sm">
                    {person.name}
                  </p>
                  <p className="truncate text-pretty text-muted-foreground text-sm">
                    {person.role}
                  </p>
                </a>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

import {
  ArrowRight,
  ArrowUpRight,
  CheckCircle,
  ContactRound,
  Hand,
  Server,
  UserCircle,
} from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"

const actions = [
  {
    title: "Getting Started",
    description:
      "Everything you need to know to get started and get to work in ChatCloud.",
    href: "#",
    icon: ArrowRight,
    iconForeground: "text-green-700",
    iconBackground: "bg-green-50 dark:bg-green-950/30",
    ringColorClass: "ring-green-700/30",
  },
  {
    title: "Admin Settings",
    description:
      "Learn how to manage your current workspace or your enterprise space.",
    href: "#",
    icon: UserCircle,
    iconForeground: "text-red-700",
    iconBackground: "bg-red-50 dark:bg-red-950/30",
    ringColorClass: "ring-red-700/30",
  },
  {
    title: "Server Setup",
    description:
      "Connect, simplify, and automate. Discover the power of apps and tools.",
    href: "#",
    icon: Server,
    iconForeground: "text-blue-700",
    iconBackground: "bg-blue-50 dark:bg-blue-950/30",
    ringColorClass: "ring-blue-700/30",
  },
  {
    title: "Login and Verification",
    description:
      "Read on to learn how to sign in with your email address, or your Apple or Google.",
    href: "#",
    icon: CheckCircle,
    iconForeground: "text-sky-700",
    iconBackground: "bg-sky-50 dark:bg-sky-950/30",
    ringColorClass: "ring-sky-700/30",
  },
  {
    title: "Account Setup",
    description:
      "Adjust your profile and preferences to make ChatCloud work just for you.",
    href: "#",
    icon: ContactRound,
    iconForeground: "text-pink-700",
    iconBackground: "bg-pink-50 dark:bg-pink-950/30",
    ringColorClass: "ring-pink-700/30",
  },
  {
    title: "Trust & Safety",
    description:
      "Trust on our current database and learn how we distribute your data.",
    href: "#",
    icon: Hand,
    iconForeground: "text-orange-700",
    iconBackground: "bg-orange-50 dark:bg-orange-950/30",
    ringColorClass: "ring-orange-700/30",
  },
]

export default function GridList03() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="grid grid-cols-1 space-y-0.5 overflow-hidden rounded-2xl bg-muted p-0.5 shadow-sm sm:grid-cols-2 sm:gap-0.5 sm:space-y-0 lg:grid-cols-3">
        {actions.map((action) => (
          <Card
            className={cn(
              "group relative rounded-xl border-0 bg-card p-0 shadow-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-inset"
            )}
            key={action.title}
          >
            <CardContent className="p-6">
              <div>
                <span
                  className={cn(
                    action.iconBackground,
                    action.iconForeground,
                    "inline-flex rounded-lg p-3 ring-2 ring-inset",
                    action.ringColorClass
                  )}
                >
                  <action.icon aria-hidden="true" className="h-6 w-6" />
                </span>
              </div>
              <div className="mt-4">
                <h3 className="text-balance font-semibold text-base text-foreground">
                  <a className="focus:outline-none" href={action.href}>
                    <span aria-hidden="true" className="absolute inset-0" />
                    {action.title}
                  </a>
                </h3>
                <p className="mt-2 text-pretty text-muted-foreground text-sm">
                  {action.description}
                </p>
              </div>
              <span
                aria-hidden="true"
                className="pointer-events-none absolute top-6 right-6 text-muted-foreground/50 group-hover:text-muted-foreground/60"
              >
                <ArrowUpRight className="h-6 w-6" />
              </span>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}