@morphika/andami 0.2.12 → 0.2.14

package/components/blocks/CoverBlockRenderer.tsx

@@ -1,261 +0,0 @@
-"use client";
-
-import type { CoverBlock } from "../../lib/sanity/types";
-import { useAssetUrl } from "../../lib/contexts/AssetContext";
-import { handleImageRetry, handleVideoRetry } from "../../lib/asset-retry";
-import { parseColorField, colorToCSS, isGradient } from "../../lib/color-utils";
-
-function getOverlayStyle(
-  overlay: CoverBlock["overlay"],
-  opacity: number
-): React.CSSProperties | null {
-  const alpha = opacity / 100;
-  switch (overlay) {
-    case "dark":
-      return { backgroundColor: `rgba(0,0,0,${alpha})` };
-    case "light":
-      return { backgroundColor: `rgba(255,255,255,${alpha})` };
-    case "gradient-bottom":
-      return {
-        background: `linear-gradient(to top, rgba(0,0,0,${alpha}) 0%, transparent 60%)`,
-      };
-    case "gradient-top":
-      return {
-        background: `linear-gradient(to bottom, rgba(0,0,0,${alpha}) 0%, transparent 60%)`,
-      };
-    default:
-      return null;
-  }
-}
-
-function getAlignItems(v: CoverBlock["content_align_v"]): string {
-  switch (v) {
-    case "top":
-      return "flex-start";
-    case "bottom":
-      return "flex-end";
-    default:
-      return "center";
-  }
-}
-
-function getJustify(h: CoverBlock["content_align_h"]): string {
-  switch (h) {
-    case "left":
-      return "flex-start";
-    case "right":
-      return "flex-end";
-    default:
-      return "center";
-  }
-}
-
-function getTextAlign(
-  h: CoverBlock["content_align_h"]
-): "left" | "center" | "right" {
-  return h || "center";
-}
-
-export default function CoverBlockRenderer({
-  block,
-}: {
-  block: CoverBlock;
-}) {
-  const height =
-    block.height === "custom" && block.custom_height
-      ? block.custom_height
-      : block.height || "100vh";
-
-  const mobileHeight =
-    block.mobile_height && block.mobile_height !== "same"
-      ? block.mobile_height
-      : null;
-
-  // Phase 4: custom overlay_gradient takes precedence over hardcoded presets
-  const overlayStyle: React.CSSProperties | null = (() => {
-    if (block.overlay_gradient) {
-      const parsed = parseColorField(block.overlay_gradient);
-      if (isGradient(parsed)) {
-        return { backgroundImage: colorToCSS(parsed) };
-      }
-      // Solid color overlay from gradient field
-      return { backgroundColor: colorToCSS(parsed) };
-    }
-    return getOverlayStyle(block.overlay ?? "none", block.overlay_opacity ?? 50);
-  })();
-
-  const resolveAsset = useAssetUrl();
-  const mediaSrc = block.media_path ? resolveAsset(block.media_path) : undefined;
-  const posterSrc = block.video_poster
-    ? resolveAsset(block.video_poster)
-    : undefined;
-  const isVideo = block.media_type === "video";
-
-  // BLK-010: Validate objectFit against allowed CSS values
-  const allowedObjectFit = new Set(["cover", "contain", "none", "fill", "scale-down"]);
-  const objectFit = allowedObjectFit.has(block.background_size || "") ? block.background_size! : "cover";
-  const objectPosition = block.background_position || "center center";
-
-  // Guard: text color must be a solid hex string. Fallback if gradient slips through.
-  const rawTextColor = block.text_color || "#ffffff";
-  const textColor = typeof rawTextColor === "string" ? rawTextColor : "#ffffff";
-
-  const ctaStyleClasses: Record<string, string> = {
-    primary:
-      "bg-brand-accent-alt text-brand-dark hover:bg-brand-accent",
-    secondary:
-      "bg-brand-dark text-white hover:bg-neutral-800",
-    outline:
-      "border-2 border-current bg-transparent hover:bg-white/10",
-    text: "underline underline-offset-4 hover:opacity-70",
-  };
-
-  // BLK-002: Sanitize _key and mobileHeight before CSS interpolation
-  // _key: allow only alphanumeric, hyphens, underscores (strip anything else)
-  const safeKey = block._key?.replace(/[^a-zA-Z0-9_-]/g, "") || "";
-  // mobileHeight: must match valid CSS height (number+unit or CSS keyword)
-  const safeMobileHeight =
-    mobileHeight && /^(\d+(\.\d+)?(px|vh|vw|em|rem|%|svh|dvh)|auto|inherit)$/i.test(mobileHeight)
-      ? mobileHeight
-      : null;
-
-  return (
-    <>
-      {/* Mobile height override via inline style tag */}
-      {safeMobileHeight && safeKey && (
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `@media(max-width:767px){.cover-block-${safeKey}{height:${safeMobileHeight}!important;min-height:${safeMobileHeight}!important;}}`,
-          }}
-        />
-      )}
-
-      <section
-        className={`cover-block-${safeKey} relative flex overflow-hidden`}
-        style={{
-          height,
-          minHeight: height,
-          alignItems: getAlignItems(block.content_align_v),
-          justifyContent: getJustify(block.content_align_h),
-          color: textColor,
-        }}
-      >
-        {/* Media layer — uses <img> instead of background-image for error recovery */}
-        {mediaSrc && !isVideo && (
-          /* eslint-disable-next-line @next/next/no-img-element */
-          <img
-            src={mediaSrc}
-            alt={block.headline || ""}
-            onError={handleImageRetry}
-            className="absolute inset-0 h-full w-full"
-            style={{
-              objectFit: objectFit as React.CSSProperties["objectFit"],
-              objectPosition,
-            }}
-          />
-        )}
-
-        {mediaSrc && isVideo && (
-          <video
-            src={mediaSrc}
-            poster={posterSrc}
-            autoPlay
-            loop
-            muted
-            playsInline
-            onError={handleVideoRetry}
-            className="absolute inset-0 h-full w-full"
-            style={{
-              objectFit: objectFit as React.CSSProperties["objectFit"],
-              objectPosition,
-            }}
-          />
-        )}
-
-        {/* Fallback: poster only if no media_path but video_poster exists */}
-        {!mediaSrc && posterSrc && (
-          /* eslint-disable-next-line @next/next/no-img-element */
-          <img
-            src={posterSrc}
-            alt=""
-            onError={handleImageRetry}
-            className="absolute inset-0 h-full w-full"
-            style={{ objectFit: "cover", objectPosition: "center" }}
-          />
-        )}
-
-        {/* No media fallback */}
-        {!mediaSrc && !posterSrc && (
-          <div className="absolute inset-0 bg-brand-dark" />
-        )}
-
-        {/* Overlay */}
-        {overlayStyle && <div className="absolute inset-0" style={overlayStyle} />}
-
-        {/* Content */}
-        <div
-          className="relative z-10 flex flex-col gap-4 py-12"
-          style={{
-            maxWidth: block.content_max_width || "800px",
-            textAlign: getTextAlign(block.content_align_h),
-            width: "100%",
-            paddingLeft: "var(--grid-padding, 24px)",
-            paddingRight: "var(--grid-padding, 24px)",
-          }}
-        >
-          {block.headline && (
-            <h1 className="font-sans text-4xl uppercase tracking-widest md:text-6xl lg:text-7xl">
-              {block.headline}
-            </h1>
-          )}
-
-          {block.subheadline && (
-            <p className="font-sans text-sm uppercase tracking-wider opacity-80 md:text-base">
-              {block.subheadline}
-            </p>
-          )}
-
-          {block.cta_button?.text && block.cta_button.url && (
-            <div>
-              <a
-                href={block.cta_button.url}
-                target={
-                  block.cta_button.target_blank ? "_blank" : undefined
-                }
-                rel={
-                  block.cta_button.target_blank
-                    ? "noopener noreferrer"
-                    : undefined
-                }
-                className={`inline-block px-6 py-3 font-sans text-sm uppercase tracking-wider transition ${
-                  ctaStyleClasses[block.cta_button.style || "primary"]
-                }`}
-              >
-                {block.cta_button.text}
-              </a>
-            </div>
-          )}
-        </div>
-
-        {/* Scroll indicator */}
-        {block.show_scroll_indicator && (
-          <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 animate-bounce">
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M12 5v14M5 12l7 7 7-7" />
-            </svg>
-          </div>
-        )}
-      </section>
-    </>
-  );
-}