diff --git a/ui/litellm-dashboard/src/components/HelpLink.tsx b/ui/litellm-dashboard/src/components/HelpLink.tsx index 0058e5ae3d7..30fd72d234e 100644 --- a/ui/litellm-dashboard/src/components/HelpLink.tsx +++ b/ui/litellm-dashboard/src/components/HelpLink.tsx @@ -1,4 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; +import { useTranslation } from "react-i18next"; import { ExternalLink, ChevronDown } from "lucide-react"; interface HelpLinkProps { @@ -40,12 +41,8 @@ interface DocsMenuProps { * Custom Pricing Documentation * */ -export const HelpLink: React.FC = ({ - href, - children = "Learn more", - variant = "inline", - className = "", -}) => { +export const HelpLink: React.FC = ({ href, children, variant = "inline", className = "" }) => { + const { t } = useTranslation(); const baseClasses = "inline-flex items-center gap-1.5 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 rounded"; @@ -62,11 +59,11 @@ export const HelpLink: React.FC = ({ target="_blank" rel="noopener noreferrer" className={`${baseClasses} ${variantClasses[variant]} ${className}`} - title="Open documentation in a new tab" + title={t("helpLink.openDocsTitle")} > - {children} + {children ?? t("common.learnMore")}