Finish migrating components

2026-01-29 17:59:11 -07:00
parent b5735bb2ad
commit 539f6c62e3
79 changed files with 2449 additions and 1730 deletions
@@ -0,0 +1,119 @@
+"use client";
+
+import { memo } from "react";
+import Button from "../Button";
+import { getAssetPath } from "../../../lib/assetUtils";
+import type { ContentLockupViewProps } from "./ContentLockup.types";
+
+function ContentLockupView({
+  title,
+  subtitle,
+  description,
+  ctaText,
+  buttonClassName,
+  variant,
+  linkText,
+  linkHref,
+  alignment,
+  titleId,
+  styles,
+}: ContentLockupViewProps) {
+  return (
+    <div className={styles.container}>
+      {variant === "ask" || variant === "ask-inverse" ? (
+        /* Simplified structure for ask variant */
+        <div
+          className={`${styles.titleGroup} ${
+            alignment === "left" ? "text-left" : "text-center"
+          }`}
+        >
+          <div
+            className={`${styles.titleContainer} ${
+              alignment === "left" ? "justify-start" : "justify-center"
+            }`}
+          >
+            {title ? (
+              <h1 id={titleId} className={styles.title}>
+                {title}
+              </h1>
+            ) : null}
+          </div>
+          {subtitle ? <h2 className={styles.subtitle}>{subtitle}</h2> : null}
+        </div>
+      ) : (
+        /* Full structure for other variants */
+        <div className={styles.textContainer}>
+          {/* Title and subtitle group */}
+          <div className={styles.titleGroup}>
+            {/* Title container */}
+            <div className={styles.titleContainer}>
+              {title ? (
+                <h1 id={titleId} className={styles.title}>
+                  {title}
+                </h1>
+              ) : null}
+              {variant === "hero" && (
+                <img
+                  src={getAssetPath("assets/Shapes_1.svg")}
+                  alt=""
+                  className={styles.shape}
+                  role="presentation"
+                />
+              )}
+            </div>
+
+            {/* Subtitle */}
+            {subtitle ? (
+              <h2 className={styles.subtitle}>{subtitle}</h2>
+            ) : null}
+          </div>
+
+          {/* Description */}
+          {description && <p className={styles.description}>{description}</p>}
+        </div>
+      )}
+
+      {/* Link for feature variant */}
+      {variant === "feature" && linkText && (
+        <a
+          href={linkHref || "#"}
+          className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[#171717] rounded-sm px-1 py-0.5"
+        >
+          {linkText}
+        </a>
+      )}
+
+      {/* CTA Button */}
+      {ctaText && (
+        <div className="flex justify-start">
+          {/* Small button for xsm and sm breakpoints */}
+          <div className="block md:hidden">
+            <Button variant="primary" size="small">
+              {ctaText}
+            </Button>
+          </div>
+          {/* Large button for md and lg breakpoints */}
+          <div className="hidden md:block xl:hidden">
+            <Button
+              variant="primary"
+              size="large"
+              className={buttonClassName}
+            >
+              {ctaText}
+            </Button>
+          </div>
+          {/* XLarge button for xl breakpoint */}
+          <div className="hidden xl:block">
+            <Button variant="primary" size="xlarge">
+              {ctaText}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+ContentLockupView.displayName = "ContentLockupView";
+
+export default memo(ContentLockupView);