chore(dev-hub) Improved Card component

Author: aditya520

apps/developer-hub/content/docs/entropy/index.mdx

@@ -40,26 +40,26 @@ Please see [How to Generate Random Numbers Using Pyth Entropy](generate-random-n
 
 ## Start Building
 
-<Cards className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-  <Card
+<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+  <IntegrationCard
     href="/entropy/create-your-first-entropy-app"
     title="Build Your First App"
-    icon={<RocketLaunch size={16} fill="unset" weight="duotone" />}
-  >
-    Step-by-step tutorial to deploy a coin flip using Entropy v2.
-  </Card>
-  <Card
+    description="Step-by-step tutorial to deploy a coin flip using Entropy v2."
+    icon={<RocketLaunch size={16} />}
+    colorScheme="blue"
+  />
+  <IntegrationCard
     href="/entropy/generate-random-numbers-evm"
     title="Generate Random Numbers"
-    icon={<DiceSix size={16} fill="unset" />}
-  >
-    How-to guide for reading fees and requesting randomness on EVM.
-  </Card>
-  <Card
+    description="How-to guide for reading fees and requesting randomness on EVM."
+    icon={<DiceSix size={16} />}
+    colorScheme="green"
+  />
+  <IntegrationCard
     href="/entropy/contract-addresses"
     title="Contracts & Providers"
-    icon={<FileText size={16} fill="unset" />}
-  >
-    Find Entropy addresses, reveal delays, gas limits, and fees.
-  </Card>
-</Cards>
+    description="Find Entropy addresses, reveal delays, gas limits, and fees."
+    icon={<FileText size={16} />}
+    colorScheme="purple"
+  />
+</div>

apps/developer-hub/src/components/IntegrationCard/index.tsx

@@ -1,9 +1,13 @@
+import Link from "next/link";
+
 type IntegrationCardProps = {
   href: string;
   icon: React.ReactNode;
   title: string;
   description: string;
   colorScheme?: "blue" | "green" | "purple";
+  external?: boolean;
+  showArrow?: boolean;
 };
 
 const colorClasses = {
@@ -24,33 +28,44 @@ const colorClasses = {
   },
 };
 
-export const IntegrationCard = ({
+export function IntegrationCard({
   href,
   icon,
   title,
   description,
   colorScheme = "blue",
-}: IntegrationCardProps) => {
+  external,
+  showArrow = true,
+}: IntegrationCardProps) {
   const colors = colorClasses[colorScheme];
+  const Wrapper = external ? "a" : Link;
+  const wrapperProps = external
+    ? { href, target: "_blank", rel: "noopener noreferrer" }
+    : { href };
 
   return (
-    <a
-      href={href}
-      className="block group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
+    <Wrapper
+      {...(wrapperProps as { href: string } | { href: string; target: string; rel: string })}
+      className="not-prose group no-underline grid h-full grid-rows-[auto_1fr] gap-3 rounded-xl border bg-[var(--color-fd-card)] border-[var(--color-fd-border)] p-5 md:p-6 shadow-sm outline-none transition-colors hover:border-[var(--color-fd-accent)] focus-visible:ring-2 focus-visible:ring-[var(--color-fd-accent)]"
+      aria-label={title}
     >
-      <div className="flex items-center gap-3 mb-3">
+      <div className="flex items-center gap-3">
         <div
-          className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}
+          className={`flex h-8 w-8 items-center justify-center rounded-md ${colors.bg}`}
         >
-          <div className={`w-4 h-4 ${colors.text}`}>{icon}</div>
+          <div className={`h-4 w-4 ${colors.text}`}>{icon}</div>
         </div>
-        <h3
-          className={`text-lg font-semibold text-gray-900 dark:text-white ${colors.hoverText}`}
-        >
-          {title}
-        </h3>
+        <h3 className={`m-0 text-base font-semibold text-[var(--color-fd-foreground)] ${colors.hoverText}`}>{title}</h3>
+        {showArrow && (
+          <span
+            className="ml-auto translate-x-0 opacity-0 transition-all duration-200 ease-out group-hover:translate-x-1 group-hover:opacity-100"
+            aria-hidden="true"
+          >
+            →
+          </span>
+        )}
       </div>
-      <p className="text-gray-600 dark:text-gray-400">{description}</p>
-    </a>
+      <p className="m-0 text-sm text-[var(--color-fd-muted-foreground)] line-clamp-2">{description}</p>
+    </Wrapper>
   );
-};
+}

apps/developer-hub/src/mdx-components.tsx

@@ -3,13 +3,16 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import type { MDXComponents } from "mdx/types";
 
+import { IntegrationCard } from "./components/IntegrationCard";
+
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,
     Tabs,
     Tab,
     ...components,
     InfoBox: InfoBox,
+    IntegrationCard,
     // Fuma has a Callout component in `defaultMdxComponents` which we still want to overwrite
     Callout: InfoBox,
   };