types-banner.ts

actions-banner.ts

"use server";

import { cookies } from "next/headers";
import { createClient } from "@/lib/supabase/server";
import type { Banner } from "@/types/banners";

/**
 * Obtiene banners activos y dentro del rango de fechas para mostrar en la página principal
 * @returns Array de banners ordenados por posición
 */
export async function getBanners(): Promise<Banner[]> {
  try {
    const cookieStore = cookies();
    const supabase = createClient(cookieStore);

    // Traer todos los banners activos
    const { data, error } = await supabase
      .from("banners")
      .select("*")
      .eq("is_active", true)
      .order("position", { ascending: true });

    if (error) {
      console.error("Error al obtener banners:", error);
      return [];
    }

    // Filtrar por fechas en JS (igual que en products.ts)
    const now = new Date().toISOString();
    const filtered = (data || []).filter((banner) => {
      const startOk = !banner.start_date || banner.start_date <= now;
      const endOk = !banner.end_date || banner.end_date >= now;
      return startOk && endOk;
    });

    console.log("BANNERS FILTRADOS PARA HOME:", filtered);

    return filtered as Banner[];
  } catch (error) {
    console.error("Error inesperado al obtener banners:", error);
    return [];
  }
}

/**
 * Obtiene un banner específico por ID
 * @param id ID del banner
 * @returns Banner o null si no se encuentra o no está activo
 */
export async function getBannerById(id: string): Promise<Banner | null> {
  try {
    const cookieStore = cookies();
    const supabase = createClient(cookieStore);

    // Obtener la fecha actual para filtrar
    const now = new Date().toISOString();

    const { data, error } = await supabase
      .from("banners")
      .select("*")
      .eq("id", id)
      .eq("is_active", true)
      .or(`start_date.is.null,start_date.lte.${now}`)
      .or(`end_date.is.null,end_date.gte.${now}`)
      .single();

    if (error) {
      console.error(`Error al obtener banner con ID ${id}:`, error);
      return null;
    }

    return data as Banner;
  } catch (error) {
    console.error(`Error inesperado al obtener banner con ID ${id}:`, error);
    return null;
  }
}

components-banner-container.tsx

import { getBanners } from "@/app/actions/banner";
import HeroCarousel from "@/components/home/banner-hero-carousel";
import { Skeleton } from "@/components/ui/skeleton";

export default async function HeroCarouselContainer() {
  try {
    // Obtener banners desde la acción del servidor
    const banners = await getBanners();

    // Si no hay banners, mostrar un mensaje o espacio reservado
    if (!banners || banners.length === 0) {
      return (
        <div className="w-full h-[300px] flex items-center justify-center bg-gray-100">
          <p className="text-muted-foreground">
            No hay promociones disponibles
          </p>
        </div>
      );
    }

    // Renderizar el carrusel con los banners obtenidos
    return <HeroCarousel initialBanners={banners} />;
  } catch (error) {
    console.error("Error al cargar banners:", error);

    // UI de fallback en caso de error
    return (
      <div className="w-full h-[300px] bg-gray-100">
        <Skeleton className="w-full h-full" />
      </div>
    );
  }
}

gistfile1.txt

export interface Banner {
  id: string;
  title: string;
  subtitle?: string;
  image_url: string;
  link_url?: string;
  position: number;
  is_active?: boolean;
  start_date?: string;
  end_date?: string;
  created_at?: string;
  updated_at?: string;
}

sections-banner-hero-carousel.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Banner } from "@/types/banners";
import { cn } from "@/lib/utils";

interface HeroCarouselProps {
  initialBanners: Banner[];
}

export default function HeroCarousel({
  initialBanners = [],
}: HeroCarouselProps) {
  // Usar initialBanners como estado inicial y garantizar que sea un array
  console.log("BANNERS EN HERO CAROUSEL:", initialBanners); // <-- Agrega este log
  const [banners] = useState<Banner[]>(
    Array.isArray(initialBanners) ? initialBanners : []
  );
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isPaused, setIsPaused] = useState(false);

  // Autoplay
  useEffect(() => {
    if (banners.length <= 1 || isPaused) return;

    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % banners.length);
    }, 5000);

    return () => clearInterval(interval);
  }, [banners.length, isPaused]);

  // Navegación
  const goToPrevious = useCallback(() => {
    setCurrentIndex((prevIndex) =>
      prevIndex === 0 ? banners.length - 1 : prevIndex - 1
    );
  }, [banners.length]);

  const goToNext = useCallback(() => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % banners.length);
  }, [banners.length]);

  const goToSlide = useCallback((index: number) => {
    setCurrentIndex(index);
  }, []);

  // Renderizado cuando no hay banners
  if (banners.length === 0) {
    return null; // El componente contenedor ya maneja este caso
  }

  // Renderizado del carrusel
  return (
    <div
      className="relative w-full h-[400px] md:h-[500px] overflow-hidden"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      {/* Banners */}
      {banners.map((banner, index) => (
        <div
          key={banner.id}
          className={cn(
            "absolute top-0 left-0 w-full h-full transition-opacity duration-500",
            index === currentIndex ? "opacity-100 z-10" : "opacity-0 z-0"
          )}
        >
          {/* Banner como enlace completo */}
          <Link
            href={banner.link_url || "#"}
            className="block w-full h-full cursor-pointer"
            aria-label={banner.title || "Banner promocional"}
          >
            {/* Imagen de fondo */}
            <div className="absolute inset-0 z-0 w-full h-full">
              <div className="relative w-full h-full">
                <Image
                  src={banner.image_url || "/placeholder.svg"}
                  alt={banner.title || "Banner promocional"}
                  fill
                  priority={index === 0}
                  sizes="100vw"
                  quality={100}
                  style={{
                    objectFit: "cover",
                    width: "100%",
                    height: "100%",
                  }}
                  className="w-full h-full"
                />
              </div>
            </div>
          </Link>
        </div>
      ))}

      {/* Controles de navegación */}
      {banners.length > 1 && (
        <>
          {/* Botones anterior/siguiente */}
          <button
            onClick={goToPrevious}
            className="absolute left-4 top-1/2 -translate-y-1/2 z-20 bg-black/30 hover:bg-black/50 text-white p-2 rounded-full"
            aria-label="Anterior"
          >
            <ChevronLeft className="h-6 w-6" />
          </button>

          <button
            onClick={goToNext}
            className="absolute right-4 top-1/2 -translate-y-1/2 z-20 bg-black/30 hover:bg-black/50 text-white p-2 rounded-full"
            aria-label="Siguiente"
          >
            <ChevronRight className="h-6 w-6" />
          </button>

          {/* Indicadores */}
          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex space-x-2">
            {banners.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={cn(
                  "w-3 h-3 rounded-full transition-all",
                  index === currentIndex
                    ? "bg-white scale-125"
                    : "bg-white/50 hover:bg-white/80"
                )}
                aria-label={`Ir al banner ${index + 1}`}
                aria-current={index === currentIndex ? "true" : "false"}
              />
            ))}
          </div>
        </>
      )}
    </div>
  );
}

server.ts

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import type { Database } from "@/types/supabase";

export function createClient() {
  return createServerComponentClient<Database>({ cookies });
}