Completed template

2026-03-02 22:12:50 -07:00
parent d811b87b12
commit 3e3d2881f5
103 changed files with 1410 additions and 622 deletions
@@ -28,34 +28,39 @@ export function RuleCardView({
  const isMedium = size === "M";
  const isSmall = size === "S";
  const isExtraSmall = size === "XS";
-  
+
  // Card dimensions - use CSS classes from className if provided, otherwise use size-based logic
  // Check if className already has padding/gap classes
-  const hasResponsivePadding = className?.includes("p-[") || className?.includes("px-[") || className?.includes("py-[") || className?.includes("pt-[") || className?.includes("pb-[");
+  const hasResponsivePadding =
+    className?.includes("p-[") ||
+    className?.includes("px-[") ||
+    className?.includes("py-[") ||
+    className?.includes("pt-[") ||
+    className?.includes("pb-[");
  const hasResponsiveGap = className?.includes("gap-[");
-  
+
  const cardPadding = hasResponsivePadding
    ? "" // If className has responsive padding, don't add size-based padding
    : isLarge || isSmall
-    ? "p-[24px]"
-    : isMedium
-    ? "p-[16px]"
-    : "pb-[24px] pt-[12px] px-[12px]"; // XS: asymmetric padding
+      ? "p-[24px]"
+      : isMedium
+        ? "p-[16px]"
+        : "pb-[24px] pt-[12px] px-[12px]"; // XS: asymmetric padding
  const cardGap = expanded
    ? "gap-[16px]"
    : hasResponsiveGap
-    ? "" // If className has responsive gap, don't add size-based gap
-    : isLarge
-    ? "gap-[10px]"
-    : isMedium
-    ? "gap-[12px]"
-    : "gap-[18px]"; // XS and S: 18px gap
+      ? "" // If className has responsive gap, don't add size-based gap
+      : isLarge
+        ? "gap-[10px]"
+        : isMedium
+          ? "gap-[12px]"
+          : "gap-[18px]"; // XS and S: 18px gap
  const cardWidth = expanded
    ? isLarge
      ? "w-[568px]"
      : isMedium
-      ? "w-[398px]"
-      : "" // XS and S: no fixed width
+        ? "w-[398px]"
+        : "" // XS and S: no fixed width
    : "";

  // Logo/Icon dimensions - use CSS responsive classes
@@ -81,19 +86,21 @@ export function RuleCardView({
  const descriptionClass = isLarge
    ? "font-inter font-medium text-[18px] leading-[24px]"
    : isMedium
-    ? "font-inter font-medium text-[14px] leading-[16px]"
-    : isSmall
-    ? "font-inter font-medium text-[14px] leading-[16px]" // S: 14px, medium, Inter
-    : "font-inter font-medium text-[12px] leading-[14px]"; // XS: 12px, medium, Inter
+      ? "font-inter font-medium text-[14px] leading-[16px]"
+      : isSmall
+        ? "font-inter font-medium text-[14px] leading-[16px]" // S: 14px, medium, Inter
+        : "font-inter font-medium text-[12px] leading-[14px]"; // XS: 12px, medium, Inter

  // Render logo/icon
  const renderLogo = () => {
    if (logoUrl) {
      // Check if it's a localhost URL or external URL that needs regular img tag
-      const isLocalhost = logoUrl.startsWith("http://localhost") || logoUrl.startsWith("https://localhost");
-      
+      const isLocalhost =
+        logoUrl.startsWith("http://localhost") ||
+        logoUrl.startsWith("https://localhost");
+
      const containerClass = `${logoContainerClass} relative rounded-full overflow-hidden mix-blend-luminosity max-[639px]:p-[16px] min-[640px]:max-[1023px]:p-[12px]`;
-      
+
      if (isLocalhost) {
        return (
          <div className={containerClass}>
@@ -108,7 +115,7 @@ export function RuleCardView({
          </div>
        );
      }
-      
+
      return (
        <div className={containerClass}>
          <Image
@@ -121,15 +128,17 @@ export function RuleCardView({
        </div>
      );
    }
-    
+
    if (icon) {
      return (
-        <div className={`${logoContainerClass} flex items-center justify-center max-[639px]:p-[16px] min-[640px]:max-[1023px]:p-[12px]`}>
+        <div
+          className={`${logoContainerClass} flex items-center justify-center max-[639px]:p-[16px] min-[640px]:max-[1023px]:p-[12px]`}
+        >
          {icon}
        </div>
      );
    }
-    
+
    if (communityInitials) {
      const initialsSize = `
        max-[639px]:text-[16px]
@@ -138,26 +147,29 @@ export function RuleCardView({
        min-[1440px]:text-[36px]
      `;
      return (
-        <div className={`${logoContainerClass} rounded-full bg-[var(--color-surface-default-primary)] flex items-center justify-center`}>
-          <span className={`${initialsSize} font-bricolage-grotesque font-bold text-[var(--color-content-default-primary,white)]`}>
+        <div
+          className={`${logoContainerClass} rounded-full bg-[var(--color-surface-default-primary)] flex items-center justify-center`}
+        >
+          <span
+            className={`${initialsSize} font-bricolage-grotesque font-bold text-[var(--color-content-default-primary,white)]`}
+          >
            {communityInitials}
          </span>
        </div>
      );
    }
-    
+
    return null;
  };

-
  // Border radius - use CSS classes if provided via className, otherwise use size-based logic
-  const borderRadiusClass = className?.includes("rounded-") 
+  const borderRadiusClass = className?.includes("rounded-")
    ? "" // If className already has border radius, don't add size-based one
-    : isExtraSmall 
-    ? "rounded-[var(--measures-radius-200,8px)]" 
-    : isSmall 
-    ? "rounded-[var(--measures-radius-300,12px)]" 
-    : "rounded-[var(--radius-measures-radius-small)]";
+    : isExtraSmall
+      ? "rounded-[var(--measures-radius-200,8px)]"
+      : isSmall
+        ? "rounded-[var(--measures-radius-300,12px)]"
+        : "rounded-[var(--radius-measures-radius-small)]";

  return (
    <div
@@ -170,48 +182,60 @@ export function RuleCardView({
      onKeyDown={onKeyDown}
    >
      {/* Outermost container with bottom border - taller to match Figma */}
-      <div className={`
+      <div
+        className={`
        border-b border-black border-solid flex items-center relative shrink-0 w-full
        max-[639px]:h-[72px]
        min-[640px]:max-[1023px]:h-[80px]
        min-[1024px]:max-[1439px]:h-[88px]
        min-[1440px]:h-[136px]
-      `}>
+      `}
+      >
        {/* Logo/Icon - fixed width/height, vertically centered, does not touch bottom */}
        {renderLogo() && (
-          <div className={`
+          <div
+            className={`
            flex items-center justify-center shrink-0
            max-[639px]:w-[72px] max-[639px]:h-[72px] max-[639px]:border-r max-[639px]:border-black max-[639px]:border-solid
            min-[640px]:max-[1023px]:w-[80px] min-[640px]:max-[1023px]:h-[80px] min-[640px]:max-[1023px]:border-r min-[640px]:max-[1023px]:border-black min-[640px]:max-[1023px]:border-solid
            min-[1024px]:max-[1439px]:w-[56px] min-[1024px]:max-[1439px]:h-[56px]
            min-[1440px]:w-[103px] min-[1440px]:h-[103px]
-          `}>
+          `}
+          >
            {renderLogo()}
          </div>
        )}
        {/* Spacing between icon and title */}
-        <div className="
+        <div
+          className="
          max-[1023px]:hidden
          min-[1024px]:w-[16px] min-[1024px]:shrink-0
-        " />
+        "
+        />
        {/* Container with no padding and left border - extends full height to touch bottom */}
        {title && (
-          <div className={`
+          <div
+            className={`
            flex-1 min-w-0 h-full flex
            max-[1023px]:border-0
            min-[1024px]:border-l min-[1024px]:border-black min-[1024px]:border-solid
-          `}>
+          `}
+          >
            {/* Inner container for header text with padding */}
-            <div className={`
+            <div
+              className={`
              flex items-center justify-center w-full
              max-[639px]:pl-[8px] max-[639px]:py-[8px]
              min-[640px]:max-[1023px]:pl-[12px] min-[640px]:max-[1023px]:py-[12px]
              min-[1024px]:max-[1439px]:px-[16px] min-[1024px]:max-[1439px]:py-[12px]
              min-[1440px]:px-[16px] min-[1440px]:py-[24px]
-            `}>
-              <h3 className={`${titleClass} text-black overflow-hidden text-ellipsis w-full`}>
-              {title}
-            </h3>
+            `}
+            >
+              <h3
+                className={`${titleClass} text-black overflow-hidden text-ellipsis w-full`}
+              >
+                {title}
+              </h3>
            </div>
          </div>
        )}
@@ -237,7 +261,11 @@ export function RuleCardView({
                    category.onAddClick?.(category.name);
                  }}
                  onCustomChipConfirm={(chipId, value) => {
-                    category.onCustomChipConfirm?.(category.name, chipId, value);
+                    category.onCustomChipConfirm?.(
+                      category.name,
+                      chipId,
+                      value,
+                    );
                  }}
                  onCustomChipClose={(chipId) => {
                    category.onCustomChipClose?.(category.name, chipId);
@@ -250,11 +278,9 @@ export function RuleCardView({
            </div>
          )}
          {/* Footer: Description */}
-      {description && (
+          {description && (
            <div className="border-t border-black border-solid pt-[16px] relative shrink-0 w-full">
-              <p className={`${descriptionClass} text-black`}>
-                {description}
-              </p>
+              <p className={`${descriptionClass} text-black`}>{description}</p>
            </div>
          )}
        </>
@@ -263,8 +289,8 @@ export function RuleCardView({
        description && (
          <div className="flex items-center justify-center relative shrink-0 w-full">
            <p className={`${descriptionClass} text-black flex-1`}>
-          {description}
-        </p>
+              {description}
+            </p>
          </div>
        )
      )}