feat(market): show certification badges in Core marketplace (#2615)

2026-10-22 00:15:20 +08:00 · 2026-09-30 18:52:00 +08:00
parent 5a31ac75fc
commit 5f3eb34baf
14 changed files with 108 additions and 0 deletions
@@ -0,0 +1,58 @@
+'use client';
+
+import { BadgeCheck } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+export function CertifiedPluginBadge({
+  compact = false,
+}: {
+  compact?: boolean;
+}) {
+  const { t, i18n } = useTranslation();
+  const language = i18n.language.startsWith('zh')
+    ? 'zh'
+    : i18n.language.startsWith('ja')
+      ? 'ja'
+      : 'en';
+  const docsURL = `https://langbot.app/docs/${language}/plugin/certified-plugins`;
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <a
+            href={docsURL}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`${t('market.certifiedPlugin')}: ${t('market.certificationLearnMore')}`}
+            onClick={(event) => event.stopPropagation()}
+            className={`inline-flex shrink-0 items-center gap-1 rounded border border-emerald-600/25 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 ${compact ? 'h-4 px-0.5' : 'px-2 py-0.5 text-xs font-medium'}`}
+          >
+            <BadgeCheck
+              aria-hidden="true"
+              className={compact ? 'h-3 w-3' : 'h-3.5 w-3.5'}
+            />
+            {!compact && t('market.certifiedPlugin')}
+          </a>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-72 text-xs">
+          <p>{t('market.certificationTooltip')}</p>
+          <a
+            href={docsURL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-1 inline-block underline underline-offset-2"
+            onClick={(event) => event.stopPropagation()}
+          >
+            {t('market.certificationLearnMore')}
+          </a>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}