docs/app/_components/quick-start-card.tsx at c9d693e1d4455ee11b3135afb06013c97e39382a · ArcadeAI/docs · 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
"use client";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@arcadeai/design-system";
import { motion } from "motion/react";
import Link from "next/link";
import { usePostHog } from "posthog-js/react";

type QuickStartCardProps = {
  icon: React.ElementType;
  title: string;
  description: string;
  href?: string;
  onClick?: () => void;
  code?: string;
};

export function QuickStartCard({
  icon: Icon,
  title,
  description,
  href,
  onClick,
  code,
}: QuickStartCardProps) {
  const posthog = usePostHog();

  const handleCardClick = () => {
    posthog?.capture("quickstart_card_clicked", {
      card_title: title,
      card_href: href || null,
      has_custom_onclick: !!onClick,
    });
  };

  const content = (
    <>
      <CardHeader className="flex flex-row items-center gap-3 p-6">
        <div className="rounded-full bg-[#ee175e]/10 p-2">
          <Icon className="h-5 w-5 text-[#ee175e]" />
        </div>
        <CardTitle className="text-gray-900 text-xl tracking-tight dark:text-white">
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent className="p-6 pt-0">
        <p className="text-gray-600 text-sm leading-relaxed dark:text-gray-300">
          {description}
        </p>
        {code && (
          <pre className="mt-1 rounded-md bg-gray-100 p-1 text-gray-800 text-sm dark:bg-gray-900 dark:text-gray-300">
            <code>{code}</code>
          </pre>
        )}
      </CardContent>
    </>
  );

  const handleClick = () => {
    handleCardClick();
    onClick?.();
  };

  let wrapper: React.ReactElement | null = null;
  if (onClick) {
    wrapper = (
      <button
        className="block h-full w-full text-left"
        onClick={handleClick}
        type="button"
      >
        {content}
      </button>
    );
  } else if (href) {
    wrapper = (
      <Link className="block h-full" href={href} onClick={handleCardClick}>
        {content}
      </Link>
    );
  } else {
    wrapper = null;
  }

  return (
    <motion.div
      whileHover={{
        scale: 1.02,
        boxShadow: "0 0 20px 0 rgba(238, 23, 94, 0.1)",
      }}
      whileTap={{ scale: 0.98 }}
    >
      <Card className="h-full border-gray-800 bg-white/80 backdrop-blur-xs transition-all hover:border-[#ee175e]/30 dark:border-gray-800 dark:bg-[rgba(17,17,17,0.8)]">
        {wrapper}
      </Card>
    </motion.div>
  );
}