> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8c05c8a2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Centro de soporte

> Consulta y busca en la base de conocimientos de ClickHouse

export const KBExplorer = ({index, featured = []}) => {
  const featuredIds = featured.map(f => f.id);
  const assetBase = typeof window !== "undefined" && window.location.pathname.startsWith("/docs") ? "/docs" : "";
  const withBase = p => p && p.startsWith("/") ? assetBase + p : p;
  const data = index || ({
    categories: [],
    tags: [],
    articles: []
  });
  const readStoredList = (key, fallback) => {
    if (typeof window === "undefined") return fallback;
    try {
      const raw = localStorage.getItem(key);
      if (!raw) return fallback;
      const parsed = JSON.parse(raw);
      return Array.isArray(parsed) ? parsed : fallback;
    } catch {
      return fallback;
    }
  };
  const [searchTerm, setSearchTerm] = useState(() => {
    if (typeof window !== "undefined") {
      return localStorage.getItem("kb-search") || "";
    }
    return "";
  });
  const [selectedCategories, setSelectedCategories] = useState(() => readStoredList("kb-categories", ["All"]));
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 6;
  const [categoriesDropdownOpen, setCategoriesDropdownOpen] = useState(true);
  const [showFilters, setShowFilters] = useState(() => {
    if (typeof window !== "undefined") {
      return localStorage.getItem("kb-show-filters") !== "false";
    }
    return true;
  });
  const [isDesktop, setIsDesktop] = useState(true);
  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(min-width: 1024px)");
    const update = () => setIsDesktop(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);
  useEffect(() => {
    if (typeof window !== "undefined") localStorage.setItem("kb-search", searchTerm);
  }, [searchTerm]);
  useEffect(() => {
    if (typeof window !== "undefined") localStorage.setItem("kb-categories", JSON.stringify(selectedCategories));
  }, [selectedCategories]);
  useEffect(() => {
    if (typeof window !== "undefined") localStorage.setItem("kb-show-filters", String(showFilters));
  }, [showFilters]);
  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm, selectedCategories]);
  const makeToggle = setter => value => {
    setter(prev => {
      if (value === "All") return ["All"];
      const withoutAll = prev.filter(v => v !== "All");
      const result = withoutAll.includes(value) ? withoutAll.filter(v => v !== value) : [...withoutAll, value];
      return result.length === 0 ? ["All"] : result;
    });
  };
  const toggleCategory = makeToggle(setSelectedCategories);
  const categoryOptions = ["All", ...data.categories];
  const resetFilters = () => {
    setSearchTerm("");
    setSelectedCategories(["All"]);
  };
  const hasActiveFilters = searchTerm !== "" || !selectedCategories.includes("All");
  const filteredArticles = useMemo(() => {
    const term = searchTerm.toLowerCase();
    return data.articles.filter(article => {
      if (featuredIds.includes(article.id)) return false;
      const matchesSearch = term === "" || article.title.toLowerCase().includes(term) || (article.description || "").toLowerCase().includes(term) || (article.tags || []).some(t => t.toLowerCase().includes(term));
      const matchesCategory = selectedCategories.includes("All") || selectedCategories.includes(article.category);
      return matchesSearch && matchesCategory;
    });
  }, [data.articles, searchTerm, selectedCategories, featuredIds]);
  const handleCardClick = (e, href) => {
    if (e.defaultPrevented) return;
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
    e.preventDefault();
    window.location.assign(withBase(href));
  };
  const featuredArticles = featured.map(f => {
    const article = data.articles.find(a => a.id === f.id);
    return {
      id: f.id,
      image: f.image,
      href: article && article.href || `/resources/support-center/knowledge-base/${f.id}`,
      title: article && article.title || ""
    };
  }).filter(f => f.image);
  const Expandable = ({label, options, selectedOptions, onToggle, isOpen, setIsOpen}) => {
    const activeCount = selectedOptions.filter(o => o !== "All").length;
    const displayLabel = activeCount > 0 ? `${label} (${activeCount})` : label;
    return <div style={{
      minWidth: "160px"
    }}>
        <button onClick={() => setIsOpen(!isOpen)} className="text-sm font-medium transition-all cursor-pointer flex items-center justify-between w-full text-black dark:text-white" style={{
      padding: "4px 0",
      gap: "8px"
    }}>
          <span className="font-semibold">{displayLabel}</span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={`transition-transform duration-200 ${isOpen ? "rotate-180" : "rotate-0"}`}>
            <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
        {isOpen && <div className="mt-1">
            {options.map(option => <label key={option} className="flex items-center gap-2 py-1.5 cursor-pointer transition-colors" onClick={e => {
      e.preventDefault();
      onToggle(option);
    }}>
                <span className="flex items-center justify-center w-4 h-4 rounded border flex-shrink-0" style={{
      borderColor: selectedOptions.includes(option) ? "#FAFF69" : "rgba(156, 163, 175, 0.6)",
      backgroundColor: selectedOptions.includes(option) ? "#FAFF69" : "transparent"
    }}>
                  {selectedOptions.includes(option) && <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2 5L4 7L8 3" stroke="black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>}
                </span>
                <span className="text-sm text-black dark:text-white">{option}</span>
              </label>)}
          </div>}
      </div>;
  };
  return <>
      <div style={{
    maxWidth: "1312px",
    marginLeft: "max(0px, calc((100vw - 1312px) / 2 - 19rem))",
    marginRight: "auto",
    paddingLeft: "1.75rem",
    paddingRight: "1.75rem"
  }}>
        <div className="my-8">
          {}
          {featuredArticles.length > 0 && <div className="mb-12">
              <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-6">Artículos destacados</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {featuredArticles.map(article => <a key={article.id} href={article.href} onClick={e => handleCardClick(e, article.href)} className="group block rounded-xl overflow-hidden border border-gray-200 dark:border-white/10 transition-all hover:border-black dark:hover:border-[#FAFF69] hover:shadow-md">
                    {}
                    <div role="img" aria-label={article.title} className="w-full aspect-[16/9] bg-cover bg-center transition-transform duration-200 group-hover:scale-[1.02]" style={{
    backgroundImage: `url(${withBase(article.image)})`
  }} />
                  </a>)}
              </div>
            </div>}

          {}
          <div className="flex flex-col lg:flex-row gap-8">
            {}
            <div className={isDesktop ? "flex-shrink-0 transition-[width] duration-300 ease-in-out" : "w-full"} style={isDesktop ? {
    width: showFilters ? "16rem" : "0px"
  } : undefined}>
              <div className="lg:sticky relative" style={isDesktop ? {
    top: "8.5rem"
  } : undefined}>
                {}
                <div aria-hidden="true" className="absolute bg-gray-200 dark:bg-white/10" style={isDesktop ? {
    left: "100%",
    top: 0,
    bottom: 0,
    width: "1px"
  } : {
    top: "100%",
    left: 0,
    right: 0,
    height: "1px"
  }} />
                {}
                <button onClick={() => setShowFilters(prev => !prev)} aria-label={showFilters ? "Ocultar filtros" : "Mostrar filtros"} title={showFilters ? "Ocultar filtros" : "Mostrar filtros"} className="flex items-center justify-center absolute z-20 cursor-pointer rounded-full border transition-colors border-gray-300 dark:border-white/20 hover:border-black dark:hover:border-[#FAFF69] bg-white dark:bg-[#1B1B18] text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-[#FAFF69] shadow-sm" style={isDesktop ? {
    left: "100%",
    top: "50%",
    width: "28px",
    height: "28px",
    transform: "translate(-50%, -50%)"
  } : {
    top: "100%",
    left: "50%",
    width: "28px",
    height: "28px",
    transform: "translate(-50%, -50%)"
  }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="transition-transform duration-300" style={{
    transform: `rotate(${isDesktop ? showFilters ? 0 : 180 : showFilters ? 90 : -90}deg)`
  }}>
                    <path d="M7.5 2.5L4 6L7.5 9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>

                {}
                <div className="overflow-hidden transition-all duration-300" style={isDesktop ? {
    width: "16rem",
    paddingRight: "1.5rem",
    opacity: showFilters ? 1 : 0,
    pointerEvents: showFilters ? "auto" : "none"
  } : {
    width: "100%",
    maxHeight: showFilters ? "1500px" : "0px",
    paddingBottom: showFilters ? "1.5rem" : "0px",
    opacity: showFilters ? 1 : 0,
    pointerEvents: showFilters ? "auto" : "none"
  }}>
                  <div className="space-y-6">
                    {}
                    <div>
                      <label className="block text-sm font-semibold text-gray-900 dark:text-zinc-50 mb-3">Búsqueda</label>
                      <div className="relative w-full">
                        <svg className="absolute pointer-events-none z-10" style={{
    left: "12px",
    top: "50%",
    transform: "translateY(-50%)",
    width: "16px",
    height: "16px",
    color: "#666"
  }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <input type="text" placeholder="Buscar artículos..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full text-sm border rounded-xl focus:outline-none bg-white dark:bg-[#1B1B18] text-black dark:text-white border-gray-300 dark:border-gray-600 focus:border-black dark:focus:border-[#FAFF69]" style={{
    height: "42px",
    padding: "0.5rem 0.75rem 0.5rem 2.75rem",
    lineHeight: "1.4",
    boxSizing: "border-box"
  }} />
                      </div>
                    </div>

                    {}
                    <div>
                      <div className="space-y-3">
                        <Expandable label="Category" options={categoryOptions} selectedOptions={selectedCategories} onToggle={toggleCategory} isOpen={categoriesDropdownOpen} setIsOpen={setCategoriesDropdownOpen} />
                      </div>
                    </div>

                    {}
                    {hasActiveFilters && <button onClick={resetFilters} className="w-full text-sm font-medium px-4 py-2 rounded-lg transition-all cursor-pointer border border-gray-300 dark:border-white/20 hover:border-black dark:hover:border-[#FAFF69] bg-white dark:bg-[#1B1B18] text-black dark:text-white">
                        Restablecer filtros
                      </button>}
                  </div>
                </div>
              </div>
            </div>

            {}
            <div className="flex-1 min-w-0">
              <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50 mb-6">Explorar artículos</h2>

              {filteredArticles.length > 0 ? <>
                  <div className="flex flex-col gap-2">
                    {filteredArticles.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map(article => <a key={article.id} href={article.href} onClick={e => handleCardClick(e, article.href)} className="group block rounded-lg border px-4 py-3 transition-all border-gray-200 dark:border-white/10 hover:border-black dark:hover:border-[#FAFF69] bg-white dark:bg-[#1B1B18]">
                        <div className="text-sm font-semibold text-gray-900 dark:text-zinc-50">{article.title}</div>
                        <div className="text-sm text-gray-600 dark:text-gray-400 mt-0.5 line-clamp-2">{article.description}</div>
                      </a>)}
                  </div>
                  {}
                  {(() => {
    const totalPages = Math.ceil(filteredArticles.length / itemsPerPage);
    if (totalPages <= 1) return null;
    const hasPrev = currentPage > 1;
    const hasNext = currentPage < totalPages;
    return <div className="flex items-center justify-center gap-3 mt-8">
                        <button onClick={() => hasPrev && setCurrentPage(prev => prev - 1)} disabled={!hasPrev} className={`p-2 rounded-lg border transition-all ${hasPrev ? "border-gray-300 dark:border-white/20 bg-white dark:bg-[#1B1B18] text-black dark:text-white hover:border-[#FAFF69] cursor-pointer" : "border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-[#1B1B18]/50 text-gray-300 dark:text-white/20 cursor-not-allowed"}`} aria-label="Página anterior">
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10 12L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </button>
                        <span className="text-sm text-gray-600 dark:text-gray-400">
                          Página {currentPage} / {totalPages}
                        </span>
                        <button onClick={() => hasNext && setCurrentPage(prev => prev + 1)} disabled={!hasNext} className={`p-2 rounded-lg border transition-all ${hasNext ? "border-gray-300 dark:border-white/20 bg-white dark:bg-[#1B1B18] text-black dark:text-white hover:border-[#FAFF69] cursor-pointer" : "border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-[#1B1B18]/50 text-gray-300 dark:text-white/20 cursor-not-allowed"}`} aria-label="Página siguiente">
                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </button>
                      </div>;
  })()}
                </> : <div className="text-center py-12 flex flex-col items-center">
                  <p className="text-gray-600 dark:text-gray-400 text-lg block">No se encontraron artículos que coincidan con los criterios seleccionados.</p>
                  <p className="text-gray-500 dark:text-gray-500 text-sm mt-2 block">Pruebe ajustando los filtros o el término de búsqueda.</p>
                </div>}
            </div>
          </div>
        </div>
      </div>
    </>;
};

export const featuredArticles = [{
  id: 'cloud-services/aws-privatelink-setup-for-clickpipes',
  image: '/images/knowledgebase-featured-articles/kb-01.png'
}, {
  id: 'tables-schema/schema-migration-tools',
  image: '/images/knowledgebase-featured-articles/kb-02.png'
}, {
  id: 'data-management/read-consistency',
  image: '/images/knowledgebase-featured-articles/kb-03.png'
}];

<div className="relative overflow-hidden">
  <div className="absolute top-0 left-0 right-0 opacity-80">
    <img src="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/F29jxERv9CsDsrnG/images/background-light.svg?fit=max&auto=format&n=F29jxERv9CsDsrnG&q=85&s=8d73f9cd96e52bd0b1e023bc169e4a47" className="block dark:hidden pointer-events-none w-full h-auto" alt="Imagen de fondo decorativa." width="1152" height="388" data-path="images/background-light.svg" />

    <img src="https://mintcdn.com/private-7c7dfe99-mintlify-8c05c8a2/F29jxERv9CsDsrnG/images/background-dark.svg?fit=max&auto=format&n=F29jxERv9CsDsrnG&q=85&s=22faed8378c4148b947035a17b7b2ac5" className="hidden dark:block pointer-events-none w-full h-auto" alt="Imagen de fondo decorativa." width="1152" height="388" data-path="images/background-dark.svg" />
  </div>

  <KBExplorer index={kbIndex} featured={featuredArticles} />
</div>
