{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-list-03",
  "type": "registry:block",
  "title": "Grid List with Icons",
  "description": "A grid list with icons block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "card"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/grid-list/grid-list-03.tsx",
      "type": "registry:component",
      "target": "components/grid-list-03.tsx",
      "content": "import {\n  ArrowRight,\n  ArrowUpRight,\n  CheckCircle,\n  ContactRound,\n  Hand,\n  Server,\n  UserCircle,\n} from 'lucide-react';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\nconst actions = [\n  {\n    title: 'Getting Started',\n    description:\n      'Everything you need to know to get started and get to work in ChatCloud.',\n    href: '#',\n    icon: ArrowRight,\n    iconForeground: 'text-green-700',\n    iconBackground: 'bg-green-50 dark:bg-green-950/30',\n    ringColorClass: 'ring-green-700/30',\n  },\n  {\n    title: 'Admin Settings',\n    description:\n      'Learn how to manage your current workspace or your enterprise space.',\n    href: '#',\n    icon: UserCircle,\n    iconForeground: 'text-red-700',\n    iconBackground: 'bg-red-50 dark:bg-red-950/30',\n    ringColorClass: 'ring-red-700/30',\n  },\n  {\n    title: 'Server Setup',\n    description:\n      'Connect, simplify, and automate. Discover the power of apps and tools.',\n    href: '#',\n    icon: Server,\n    iconForeground: 'text-blue-700',\n    iconBackground: 'bg-blue-50 dark:bg-blue-950/30',\n    ringColorClass: 'ring-blue-700/30',\n  },\n  {\n    title: 'Login and Verification',\n    description:\n      'Read on to learn how to sign in with your email address, or your Apple or Google.',\n    href: '#',\n    icon: CheckCircle,\n    iconForeground: 'text-sky-700',\n    iconBackground: 'bg-sky-50 dark:bg-sky-950/30',\n    ringColorClass: 'ring-sky-700/30',\n  },\n  {\n    title: 'Account Setup',\n    description:\n      'Adjust your profile and preferences to make ChatCloud work just for you.',\n    href: '#',\n    icon: ContactRound,\n    iconForeground: 'text-pink-700',\n    iconBackground: 'bg-pink-50 dark:bg-pink-950/30',\n    ringColorClass: 'ring-pink-700/30',\n  },\n  {\n    title: 'Trust & Safety',\n    description:\n      'Trust on our current database and learn how we distribute your data.',\n    href: '#',\n    icon: Hand,\n    iconForeground: 'text-orange-700',\n    iconBackground: 'bg-orange-50 dark:bg-orange-950/30',\n    ringColorClass: 'ring-orange-700/30',\n  },\n];\n\nexport default function GridList03() {\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      <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\">\n        {actions.map((action) => (\n          <Card\n            className={cn(\n              'group relative rounded-xl border-0 bg-card p-0 shadow-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-inset'\n            )}\n            key={action.title}\n          >\n            <CardContent className=\"p-6\">\n              <div>\n                <span\n                  className={cn(\n                    action.iconBackground,\n                    action.iconForeground,\n                    'inline-flex rounded-lg p-3 ring-2 ring-inset',\n                    action.ringColorClass\n                  )}\n                >\n                  <action.icon aria-hidden=\"true\" className=\"h-6 w-6\" />\n                </span>\n              </div>\n              <div className=\"mt-4\">\n                <h3 className=\"text-balance font-semibold text-base text-foreground\">\n                  <a className=\"focus:outline-none\" href={action.href}>\n                    <span aria-hidden=\"true\" className=\"absolute inset-0\" />\n                    {action.title}\n                  </a>\n                </h3>\n                <p className=\"mt-2 text-pretty text-muted-foreground text-sm\">\n                  {action.description}\n                </p>\n              </div>\n              <span\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute top-6 right-6 text-muted-foreground/50 group-hover:text-muted-foreground/60\"\n              >\n                <ArrowUpRight className=\"h-6 w-6\" />\n              </span>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "grid-list"
  ]
}