fix: refactor buttons on card grid

components/TempDesignSystem/Card/index.tsx

@@ -1,36 +1,93 @@
 import Title from "@/components/Title"
 
 import Button from "../Button"
+import { ButtonProps } from "../Button/button"
+import Divider from "../Divider"
 import Link from "../Link"
 import { CardProps } from "./card"
+import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
 
 export default function Card({
-  link,
-  subtitle,
-  title,
-  openInNewTab = false,
+  primaryButton,
+  secondaryButton,
+  scriptedTopTitle,
+  heading,
+  bodyText,
+  backgroundImage,
+  className,
+  theme,
 }: CardProps) {
+  let buttonTheme: ButtonProps["theme"] = "primaryLight"
+
+  switch (theme) {
+    case "one":
+      buttonTheme = "primaryLight"
+      break
+    case "two":
+      buttonTheme = "secondaryLight"
+      break
+    case "three":
+      buttonTheme = "tertiaryLight"
+      break
+  }
+
   return (
-    <article className={styles.linkCard}>
-      {title ? (
-        <Title level="h3" weight="semiBold">
-          {title}
+    <article
+      className={cardVariants({
+        className,
+        theme,
+      })}
+    >
+      {scriptedTopTitle ? (
+        <section className={styles.scriptContainer}>
+          <Title level="h3" weight="semiBold" className={styles.scriptedTitle}>
+            {scriptedTopTitle}
+          </Title>
+          <Divider className={styles.divider} />
+        </section>
+      ) : null}
+      {heading ? (
+        <Title
+          level="h3"
+          as="h5"
+          weight="semiBold"
+          uppercase
+          className={styles.heading}
+        >
+          {heading}
         </Title>
       ) : null}
-      {subtitle ? (
-        <Title level="h5" weight="light">
-          {subtitle}
-        </Title>
-      ) : null}
-      {link ? (
-        <Button asChild intent="primary">
-          <Link href={link.href} target={openInNewTab ? "_blank" : undefined}>
-            {link.title}
-          </Link>
-        </Button>
-      ) : null}
+      {bodyText ? <p className={styles.bodyText}>{bodyText}</p> : null}
+      <div className={styles.buttonContainer}>
+        {primaryButton ? (
+          <Button asChild theme={buttonTheme} size="small">
+            <Link
+              href={primaryButton.href}
+              target={primaryButton.openInNewTab ? "_blank" : undefined}
+            >
+              {primaryButton.title}
+            </Link>
+          </Button>
+        ) : null}
+        {secondaryButton ? (
+          <Button
+            asChild
+            theme={buttonTheme}
+            size="small"
+            intent="secondary"
+            disabled
+          >
+            <Link
+              href={secondaryButton.href}
+              target={secondaryButton.openInNewTab ? "_blank" : undefined}
+            >
+              {secondaryButton.title}
+            </Link>
+          </Button>
+        ) : null}
+      </div>
     </article>
   )
 }