Grid List with Icons

1import {
2  ArrowRight,
3  ArrowUpRight,
4  CheckCircle,
5  ContactRound,
6  Hand,
7  Server,
8  UserCircle,
9} from 'lucide-react';
10import { Card, CardContent } from '@/components/ui/card';
11import { cn } from '@/lib/utils';
12 
13const actions = [
14  {
15    title: 'Getting Started',
16    description:
17      'Everything you need to know to get started and get to work in ChatCloud.',
18    href: '#',
19    icon: ArrowRight,
20    iconForeground: 'text-green-700',
21    iconBackground: 'bg-green-50 dark:bg-green-950/30',
22    ringColorClass: 'ring-green-700/30',
23  },
24  {
25    title: 'Admin Settings',
26    description:
27      'Learn how to manage your current workspace or your enterprise space.',
28    href: '#',
29    icon: UserCircle,
30    iconForeground: 'text-red-700',
31    iconBackground: 'bg-red-50 dark:bg-red-950/30',
32    ringColorClass: 'ring-red-700/30',
33  },
34  {
35    title: 'Server Setup',
36    description:
37      'Connect, simplify, and automate. Discover the power of apps and tools.',
38    href: '#',
39    icon: Server,
40    iconForeground: 'text-blue-700',
41    iconBackground: 'bg-blue-50 dark:bg-blue-950/30',
42    ringColorClass: 'ring-blue-700/30',
43  },
44  {
45    title: 'Login and Verification',
46    description:
47      'Read on to learn how to sign in with your email address, or your Apple or Google.',
48    href: '#',
49    icon: CheckCircle,
50    iconForeground: 'text-sky-700',
51    iconBackground: 'bg-sky-50 dark:bg-sky-950/30',
52    ringColorClass: 'ring-sky-700/30',
53  },
54  {
55    title: 'Account Setup',
56    description:
57      'Adjust your profile and preferences to make ChatCloud work just for you.',
58    href: '#',
59    icon: ContactRound,
60    iconForeground: 'text-pink-700',
61    iconBackground: 'bg-pink-50 dark:bg-pink-950/30',
62    ringColorClass: 'ring-pink-700/30',
63  },
64  {
65    title: 'Trust & Safety',
66    description:
67      'Trust on our current database and learn how we distribute your data.',
68    href: '#',
69    icon: Hand,
70    iconForeground: 'text-orange-700',
71    iconBackground: 'bg-orange-50 dark:bg-orange-950/30',
72    ringColorClass: 'ring-orange-700/30',
73  },
74];
75 
76export default function GridList03() {
77  return (
78    <div className="flex items-center justify-center p-8">
79      <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">
80        {actions.map((action) => (
81          <Card
82            className={cn(
83// … truncated