ready to test

Testing Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-06-22 10:07:20 +08:00
parent 56d984a26a
commit fbef7cb6e6
283 changed files with 25961 additions and 1072 deletions
@@ -0,0 +1,60 @@
+// components/blocks/Banner.jsx
+
+import { Megaphone } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Height per size — controls the strip's visual weight, not its width (always full-width).
+const SIZE_HEIGHT = {
+    sm: "h-20",
+    md: "h-32",
+    lg: "h-48",
+};
+
+// ── Banner ───────────────────────────────────────────────────────────────────
+/**
+ * Generic banner advertisement block.
+ * Full-width horizontal strip, image-led with optional headline overlay.
+ * Click anywhere on the banner triggers the first available CTA (or just tracks
+ * the click if no CTA exists) — banners don't carry their own button row.
+ *
+ * Props:
+ *   ad         — advertisement object { headline, ctas, image, image_url, advertisement_id }
+ *   size       — "sm" | "md" | "lg" (default "md")
+ *   onCtaClick — (ad, cta) => void, called on click. cta may be undefined if the ad has none.
+ */
+export function Banner({ ad, size, onCtaClick }) {
+    if (!ad) return null;
+
+    const imageSrc = ad.image?.file_url || ad.image_url || null;
+    const ctas = Array.isArray(ad.ctas) ? ad.ctas : [];
+    const resolvedSize = ad.size || size || "md";
+    const heightClass = SIZE_HEIGHT[resolvedSize] ?? SIZE_HEIGHT.md;
+
+    const handleClick = () => onCtaClick?.(ad, ctas[0]);
+
+    return (
+        <button
+            type="button"
+            onClick={handleClick}
+            className={`relative w-full rounded-lg bg-muted overflow-hidden flex items-center justify-center text-left ${heightClass}`}
+        >
+            {imageSrc ? (
+                <img src={imageSrc} alt={ad.headline || "Advertisement"} className="w-full h-full object-cover" />
+            ) : (
+                <Megaphone className="size-6 text-muted-foreground" />
+            )}
+
+            {ad.headline && (
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-black/0 flex items-end p-4">
+                    <p className="text-white font-medium text-sm sm:text-base">{ad.headline}</p>
+                </div>
+            )}
+        </button>
+    );
+}
+
+// ── BannerSkeleton ───────────────────────────────────────────────────────────
+
+export function BannerSkeleton({ size = "md" }) {
+    return <Skeleton className={`w-full rounded-lg ${SIZE_HEIGHT[size] ?? SIZE_HEIGHT.md}`} />;
+}