add category backlinks from partner page

Author: general-adhoc

apps/web/ui/program-marketplace/marketplace-program-hero.tsx

@@ -3,6 +3,7 @@
 import { NetworkProgramExtendedProps } from "@/lib/types";
 import { marketplaceProgramDetailsColumnClassName } from "@/ui/program-marketplace/marketplace-program-details-layout";
 import { ProgramCategory } from "@/ui/program-marketplace/program-category";
+import { getMarketplaceCategoryHref } from "@/ui/program-marketplace/utils/urls";
 import { Globe } from "@dub/ui/icons";
 import { OG_AVATAR_URL, cn, getDomainWithoutWWW } from "@dub/utils";
 import Link from "next/link";
@@ -89,6 +90,7 @@ export function MarketplaceProgramHero({
                     key={category}
                     category={category}
                     variant="surface"
+                    href={getMarketplaceCategoryHref(category)}
                   />
                 ))}
               </div>

apps/web/ui/program-marketplace/program-category.tsx

@@ -2,18 +2,21 @@ import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
 import { Category } from "@dub/prisma/client";
 import { CircleInfo } from "@dub/ui";
 import { cn } from "@dub/utils";
+import Link from "next/link";
 
 export const programCategorySurfaceClassName =
   "inline-flex h-5 max-h-5 min-w-0 items-center gap-1 rounded-full bg-neutral-900/[0.06] px-2 text-xs font-medium text-neutral-900 shadow-[0_0.5px_1px_0_rgba(0,0,0,0.03)] ring-1 ring-inset ring-neutral-900/[0.05] backdrop-blur-[3px] backdrop-saturate-150 transition-[background-color,transform] duration-150 ease-out [@media(hover:hover)]:hover:bg-neutral-900/[0.09] active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 [@media(hover:none)]:hover:bg-neutral-900/[0.06]";
 
 export const ProgramCategory = ({
   category,
   onClick,
+  href,
   variant = "default",
   className,
 }: {
   category: Category;
   onClick?: () => void;
+  href?: string;
   variant?: "default" | "pill" | "surface";
   className?: string;
 }) => {
@@ -23,33 +26,23 @@ export const ProgramCategory = ({
     label: category.replaceAll("_", " "),
   };
 
-  const As = onClick ? "button" : "div";
+  const sharedClassName = cn(
+    variant === "surface"
+      ? programCategorySurfaceClassName
+      : variant === "pill"
+        ? "inline-flex min-w-0 items-center gap-1.5 rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-medium text-neutral-600"
+        : "text-content-default -ml-1 flex h-6 min-w-0 items-center gap-1 rounded-md px-1",
+    (href || onClick) &&
+      (variant === "pill"
+        ? "hover:bg-neutral-200/80 active:bg-neutral-200"
+        : variant === "default"
+          ? "hover:bg-bg-subtle active:bg-bg-emphasis"
+          : undefined),
+    className,
+  );
 
-  return (
-    <As
-      {...(onClick && {
-        type: "button",
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onClick?.();
-        },
-      })}
-      className={cn(
-        variant === "surface"
-          ? programCategorySurfaceClassName
-          : variant === "pill"
-            ? "inline-flex min-w-0 items-center gap-1.5 rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-medium text-neutral-600"
-            : "text-content-default -ml-1 flex h-6 min-w-0 items-center gap-1 rounded-md px-1",
-        onClick &&
-          (variant === "pill"
-            ? "hover:bg-neutral-200/80 active:bg-neutral-200"
-            : variant === "default"
-              ? "hover:bg-bg-subtle active:bg-bg-emphasis"
-              : undefined),
-        className,
-      )}
-    >
+  const content = (
+    <>
       <Icon
         className={cn(
           "shrink-0",
@@ -72,6 +65,32 @@ export const ProgramCategory = ({
       >
         {label}
       </span>
-    </As>
+    </>
   );
+
+  if (href) {
+    return (
+      <Link href={href} className={sharedClassName}>
+        {content}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick?.();
+        }}
+        className={sharedClassName}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return <div className={sharedClassName}>{content}</div>;
 };