CopilotKit/docs/components/react/cta-cards.tsx at main · samuelson-chen/CopilotKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
"use client";

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Link from "next/link";
import { IconType } from "react-icons";
import {
  BotIcon,
  WrenchIcon,
  Pause,
  Share2,
  Bot,
  Wrench,
  MessageSquare,
  LayoutTemplate,
  Wand,
  UserCog,
  Play,
} from "lucide-react";

// Icon resolver function for CTACards
function getIconByKey(
  iconKey: string,
): React.ComponentType<{ className?: string }> {
  switch (iconKey) {
    case "bot":
      return BotIcon;
    case "boticon":
      return Bot;
    case "wrench":
      return WrenchIcon;
    case "wrenchicon":
      return Wrench;
    case "pause":
      return Pause;
    case "share2":
      return Share2;
    case "message-square":
      return MessageSquare;
    case "layout-template":
      return LayoutTemplate;
    case "wand":
      return Wand;
    case "user-cog":
      return UserCog;
    case "play":
      return Play;
    default:
      return BotIcon;
  }
}

interface CTACardProps {
  icon?: IconType;
  iconKey?: string;
  title: string;
  description: string;
  href: string;
  iconBgColor?: string;
}

interface CTACardsProps {
  cards: CTACardProps[];
  columns?: 1 | 2 | 3 | 4;
}

export function CTACard({
  icon,
  iconKey,
  title,
  description,
  href,
  iconBgColor = "bg-indigo-500",
}: CTACardProps) {
  const Icon = icon || (iconKey ? getIconByKey(iconKey) : BotIcon);

  return (
    <Link href={href} className="no-underline">
      <Card className="transition-transform hover:scale-105 cursor-pointer shadow-xl shadow-indigo-500/20 h-full">
        <CardHeader>
          <div className="flex items-center gap-3">
            <div
              className={`flex items-center justify-center ${iconBgColor} rounded-full w-10 h-10`}
            >
              <Icon className="h-6 w-6 text-white" />
            </div>
            <CardTitle className="text-md">{title}</CardTitle>
          </div>
          <CardDescription className="text-md pt-4">
            {description}
          </CardDescription>
        </CardHeader>
      </Card>
    </Link>
  );
}

export function CTACards({ cards, columns = 3 }: CTACardsProps) {
  const lastItemClass =
    cards.length % columns !== 0
      ? `xl:col-span-${columns - (cards.length % columns) + 1}`
      : "";

  return (
    <div
      className={`grid grid-cols-1 gap-y-8 gap-x-10 xl:grid-cols-${columns} py-6`}
    >
      {cards.map((card, index) => (
        <div
          key={index}
          className={index === cards.length - 1 ? lastItemClass : ""}
        >
          <CTACard {...card} />
        </div>
      ))}
    </div>
  );
}