Updating Card component

packages/ui/components/card.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useAddUtmParams } from "../hooks/use-add-utm-params";
+
+/**
+ * This component displays a link with a title and a content.
+ * @param className - CSS classes on the `a` tag
+ * @param title - title of the card element
+ * @param children - children displayed as content of the Card (in a `p` tag)
+ * @param href - URL that the `a` tag points to
+ * @returns JSX.Element
+ */
+export function Card({
+  className,
+  title,
+  children,
+  href,
+}: Readonly<{
+  className?: string;
+  title: string;
+  children: React.ReactNode;
+  href: string;
+}>): JSX.Element {
+  const { getStringWithUtmParams } = useAddUtmParams();
+  const hrefWithParams: string = getStringWithUtmParams(href);
+
+  return (
+    <a
+      className={className}
+      href={hrefWithParams}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <h2>
+        {title} <span>-&gt;</span>
+      </h2>
+      <p>{children}</p>
+    </a>
+  );
+}

packages/ui/hooks/use-add-utm-params.ts

@@ -0,0 +1,34 @@
+const utmParams = {
+  utm_source: "create-turbo",
+  utm_medium: "basic",
+  utm_campaign: "create-turbo",
+};
+
+export const useAddUtmParams = (): {
+  getWithUtmParams: (href: string) => URL;
+  getStringWithUtmParams: (href: string) => string;
+} => {
+  const getWithUtmParams = (href: string): URL => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- `URL.canParse` shows as an unsafe call to `any`
+    if (!URL.canParse(href)) {
+      throw new Error(`${href} cannot be parsed as a valid URL.`);
+    }
+
+    const url = new URL(href);
+    const params = new URLSearchParams(url.search);
+
+    for (const [key, val] of Object.entries(utmParams)) {
+      params.set(key, val);
+    }
+    url.search = params.toString();
+    return url;
+  };
+
+  const getStringWithUtmParams = (href: string): string =>
+    getWithUtmParams(href).toString();
+
+  return {
+    getWithUtmParams,
+    getStringWithUtmParams,
+  };
+};

packages/ui/index.tsx

@@ -1,2 +1,2 @@
 // component exports
-export { Card } from "./card";
+export { Card } from "./components/card";