@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/agents/CustomAgentModal.tsx

@@ -0,0 +1,691 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { X, Loader2, ChevronRight, ChevronDown, CheckCircle2, Info, AlertCircle, Server, Zap } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { useFocusTrap } from '@/lib/hooks/useFocusTrap';
+import { toast } from '@/lib/toast';
+import { Field, Input } from '@/components/settings/Primitives';
+import type { AgentInfo } from '@/components/settings/types';
+
+/* ─── Types ─── */
+
+interface DetectResult {
+  exists: boolean;
+  detectedConfig?: string;
+  detectedFormat?: 'json' | 'toml';
+  detectedConfigKey?: string;
+  hasSkillsDir: boolean;
+  detectedSkillDir?: string;
+  skillCount?: number;
+  skillNames?: string[];
+  mcpServers?: string[];
+  mcpParseError?: string;
+  suggestedName?: string;
+}
+
+interface FormState {
+  name: string;
+  baseDir: string;
+  global: string;
+  configKey: string;
+  format: 'json' | 'toml';
+  preferredTransport: 'stdio' | 'http';
+  project: string;
+  presenceCli: string;
+  skillDir: string;
+}
+
+interface CustomAgentModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  existingAgents: AgentInfo[];
+  /** If provided, modal is in "edit" mode. */
+  editAgent?: AgentInfo | null;
+}
+
+/* ─── Slugify (client-side mirror) ─── */
+
+function slugify(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^\x20-\x7E]/g, '')
+    .replace(/[_\s]+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+/* ─── Component ─── */
+
+export default function CustomAgentModal({
+  open,
+  onClose,
+  onSuccess,
+  existingAgents,
+  editAgent,
+}: CustomAgentModalProps) {
+  const { t } = useLocale();
+  const p = t.agentsContent.overview;
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  const isEdit = !!editAgent;
+
+  // Phase: 'input' (Phase A) or 'result' (Phase B)
+  const [phase, setPhase] = useState<'input' | 'result'>('input');
+  const [detecting, setDetecting] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [detectResult, setDetectResult] = useState<DetectResult | null>(null);
+  const [detectTimedOut, setDetectTimedOut] = useState(false);
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+
+  const [form, setForm] = useState<FormState>({
+    name: '',
+    baseDir: '',
+    global: '',
+    configKey: 'mcpServers',
+    format: 'json',
+    preferredTransport: 'stdio',
+    project: '',
+    presenceCli: '',
+    skillDir: '',
+  });
+
+  // Reset state when modal opens/closes or editAgent changes
+  useEffect(() => {
+    if (!open) return;
+    if (editAgent) {
+      setForm({
+        name: editAgent.name,
+        baseDir: editAgent.customBaseDir || '',
+        global: editAgent.globalPath || '',
+        configKey: editAgent.configKey || 'mcpServers',
+        format: editAgent.format || 'json',
+        preferredTransport: editAgent.preferredTransport || 'stdio',
+        project: editAgent.projectPath || '',
+        presenceCli: '',
+        skillDir: editAgent.skillWorkspacePath || '',
+      });
+      setPhase('result');
+      setCustomizeOpen(true);
+      setDetectResult(null);
+      setError(null);
+    } else {
+      setForm({
+        name: '',
+        baseDir: '',
+        global: '',
+        configKey: 'mcpServers',
+        format: 'json',
+        preferredTransport: 'stdio',
+        project: '',
+        presenceCli: '',
+        skillDir: '',
+      });
+      setPhase('input');
+      setCustomizeOpen(false);
+      setDetectResult(null);
+      setError(null);
+      setDetectTimedOut(false);
+    }
+  }, [open, editAgent]);
+
+  // Focus name input on open
+  useEffect(() => {
+    if (open && phase === 'input') {
+      setTimeout(() => nameRef.current?.focus(), 100);
+    }
+  }, [open, phase]);
+
+  useFocusTrap(dialogRef, open);
+
+  // Escape to close
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  const existingKeys = useMemo(() => {
+    const keys = new Set(existingAgents.map(a => a.key));
+    if (isEdit && editAgent) keys.delete(editAgent.key);
+    return keys;
+  }, [existingAgents, isEdit, editAgent]);
+
+  const slug = useMemo(() => slugify(form.name), [form.name]);
+
+  const nameError = useMemo(() => {
+    if (isEdit) return null; // key is immutable on edit; name can change freely
+    if (!form.name.trim()) return null;
+    const key = slug || '';
+    if (!key) return null;
+    if (existingKeys.has(key)) {
+      const conflict = existingAgents.find(a => a.key === key);
+      if (conflict?.isCustom) return p.customAgentKeyConflict?.(key) ?? `An agent with key "${key}" already exists`;
+      return p.customAgentBuiltinConflict?.(conflict?.name || key) ?? `Conflicts with built-in agent "${conflict?.name || key}"`;
+    }
+    return null;
+  }, [isEdit, slug, existingKeys, existingAgents, form.name, p]);
+
+  const canContinue = form.name.trim() && form.baseDir.trim() && !nameError;
+
+  const setField = useCallback(<K extends keyof FormState>(key: K, value: FormState[K]) => {
+    setForm(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  /* ─── Detect ─── */
+
+  const handleContinue = useCallback(async () => {
+    if (!canContinue) return;
+    setError(null);
+    setDetecting(true);
+
+    const dir = form.baseDir.trim();
+
+    // Detect API only scans ~/ paths for security; for other absolute paths,
+    // skip detection and go straight to Phase B with sensible defaults.
+    if (!dir.startsWith('~/')) {
+      const normalized = dir.endsWith('/') ? dir : dir + '/';
+      setField('global', normalized + 'mcp.json');
+      setField('skillDir', normalized + 'skills/');
+      setDetectResult({ exists: false, hasSkillsDir: false });
+      setPhase('result');
+      setDetecting(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 3000);
+
+    try {
+      const res = await fetch('/api/agents/custom/detect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ baseDir: dir }),
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeout);
+      const data: DetectResult = await res.json();
+
+      if (!res.ok) {
+        setError((data as unknown as { error: string }).error || p.customAgentFailedSave);
+        return;
+      }
+
+      setDetectResult(data);
+
+      if (data.detectedConfig) setField('global', data.detectedConfig);
+      else {
+        setField('global', (dir.endsWith('/') ? dir : dir + '/') + 'mcp.json');
+      }
+      if (data.detectedFormat) setField('format', data.detectedFormat);
+      if (data.detectedConfigKey) setField('configKey', data.detectedConfigKey);
+      setField('skillDir', data.detectedSkillDir || (dir.endsWith('/') ? dir : dir + '/') + 'skills/');
+
+      setPhase('result');
+    } catch {
+      clearTimeout(timeout);
+      const normalized = dir.endsWith('/') ? dir : dir + '/';
+      setField('global', normalized + 'mcp.json');
+      setField('skillDir', normalized + 'skills/');
+      setDetectResult({ exists: false, hasSkillsDir: false });
+      setDetectTimedOut(true);
+      setPhase('result');
+    } finally {
+      setDetecting(false);
+    }
+  }, [canContinue, form.baseDir, setField, p]);
+
+  /* ─── Save ─── */
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setError(null);
+
+    const body = isEdit
+      ? {
+          key: editAgent!.key,
+          name: form.name.trim(),
+          baseDir: form.baseDir.trim(),
+          global: form.global.trim() || undefined,
+          configKey: form.configKey.trim() || undefined,
+          format: form.format,
+          preferredTransport: form.preferredTransport,
+          project: form.project.trim() || null,
+          presenceCli: form.presenceCli.trim() || undefined,
+          skillDir: form.skillDir.trim() || undefined,
+        }
+      : {
+          name: form.name.trim(),
+          baseDir: form.baseDir.trim(),
+          global: form.global.trim() || undefined,
+          configKey: form.configKey.trim() || undefined,
+          format: form.format,
+          preferredTransport: form.preferredTransport,
+          project: form.project.trim() || null,
+          presenceCli: form.presenceCli.trim() || undefined,
+          skillDir: form.skillDir.trim() || undefined,
+        };
+
+    try {
+      const res = await fetch('/api/agents/custom', {
+        method: isEdit ? 'PUT' : 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || p.customAgentFailedSave);
+        setSaving(false);
+        return;
+      }
+
+      const toastMsg = isEdit
+        ? p.customAgentUpdated(form.name.trim())
+        : p.customAgentAdded(form.name.trim());
+      toast.success(toastMsg);
+      onSuccess();
+      onClose();
+    } catch {
+      setError(p.customAgentNetworkError);
+    } finally {
+      setSaving(false);
+    }
+  }, [isEdit, editAgent, form, onSuccess, onClose, p]);
+
+  /* ─── Keyboard: Enter ─── */
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key !== 'Enter') return;
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+      e.preventDefault();
+      if (phase === 'input' && canContinue && !detecting) {
+        handleContinue();
+      } else if (phase === 'result' && !saving) {
+        handleSave();
+      }
+    }
+  }, [phase, canContinue, detecting, saving, handleContinue, handleSave]);
+
+  if (!open) return null;
+
+  const title = isEdit
+    ? p.editCustomAgentTitle(editAgent!.name)
+    : p.addCustomAgentTitle;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true" aria-labelledby="custom-agent-modal-title">
+      {/* Backdrop */}
+      <div className="absolute inset-0 modal-backdrop" onClick={onClose} aria-hidden="true" />
+
+      {/* Dialog */}
+      <div
+        ref={dialogRef}
+        className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full mx-4 animate-in fade-in zoom-in-95 duration-200 max-h-[85vh] overflow-y-auto"
+        onKeyDown={handleKeyDown}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 pt-5 pb-1">
+          <h2 id="custom-agent-modal-title" className="text-base font-semibold text-foreground">{title}</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-7 h-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label="Close"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4 space-y-4">
+          {/* Name */}
+          <Field label={p.customAgentName}>
+            <input
+              ref={nameRef}
+              value={form.name}
+              onChange={(e) => setField('name', e.target.value)}
+              placeholder={p.customAgentNamePlaceholder}
+              aria-invalid={!!nameError}
+              className={`w-full px-3 py-2 text-sm bg-background border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 ${nameError ? 'border-[var(--error)] focus-visible:ring-[var(--error)]' : 'border-border'}`}
+              autoComplete="off"
+            />
+            {nameError ? (
+              <p className="text-xs text-[var(--error)] mt-1 flex items-center gap-1">
+                <AlertCircle size={12} />
+                {nameError}
+              </p>
+            ) : form.name.trim() && slug ? (
+              <p className="text-[11px] text-muted-foreground mt-0.5">{p.customAgentKeyPreview(slug)}</p>
+            ) : null}
+          </Field>
+
+          {/* Base Dir */}
+          <Field label={p.customAgentDir} hint={phase === 'input' ? p.customAgentDirHint : undefined}>
+            <Input
+              value={form.baseDir}
+              onChange={(e) => {
+                setField('baseDir', e.target.value);
+                if (phase === 'result') {
+                  setPhase('input');
+                  setDetectResult(null);
+                }
+              }}
+              placeholder={p.customAgentDirPlaceholder}
+              autoComplete="off"
+            />
+            {/* Detection status hints */}
+            {phase === 'result' && detectResult?.exists && (
+              <p className="text-xs text-[var(--success)] mt-1 flex items-center gap-1">
+                <CheckCircle2 size={12} />
+                {p.customAgentDirFound}
+              </p>
+            )}
+            {phase === 'result' && detectResult && !detectResult.exists && !detectTimedOut && (
+              <p className="text-xs text-[var(--info,var(--muted-foreground))] mt-1 flex items-center gap-1">
+                <Info size={12} />
+                {p.customAgentDirNotFound}
+              </p>
+            )}
+            {phase === 'result' && detectTimedOut && (
+              <p className="text-xs text-[var(--amber)] mt-1 flex items-center gap-1">
+                <AlertCircle size={12} />
+                {p.customAgentDetectTimeout}
+              </p>
+            )}
+          </Field>
+
+          {/* Phase B: Detection Results */}
+          {phase === 'result' && (
+            <>
+              {/* Result Card */}
+              <div className={`rounded-lg p-4 space-y-3 ${
+                detectResult?.exists
+                  ? 'border border-[var(--success)]/20 bg-[var(--success)]/5'
+                  : 'border border-border bg-muted/30'
+              }`}>
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  {detectResult?.exists ? p.customAgentDetectedTitle : p.customAgentDefaultTitle}
+                </p>
+                <div className="space-y-2.5">
+                  {/* Config Path */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">{p.customAgentConfigLabel}</p>
+                    <span className="text-sm text-foreground font-mono truncate block">{form.global}</span>
+                    {detectResult?.mcpParseError && (
+                      <p className="text-xs text-[var(--error)] mt-1 flex items-center gap-1">
+                        <AlertCircle size={12} className="shrink-0" />
+                        {detectResult.mcpParseError}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Format & Key */}
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">{p.customAgentFormatLabel}</p>
+                      <span className="text-sm text-foreground">{form.format.toUpperCase()}</span>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">Config Key</p>
+                      <span className="text-sm text-foreground font-mono">{form.configKey}</span>
+                    </div>
+                  </div>
+
+                  {/* Transport */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1">{p.customAgentTransportLabel}</p>
+                    <span className="text-sm text-foreground">{form.preferredTransport}</span>
+                  </div>
+
+                  {/* MCP Servers */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+                      <Server size={11} className="shrink-0" aria-hidden="true" />
+                      MCP Servers
+                    </p>
+                    {detectResult?.mcpServers && detectResult.mcpServers.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {detectResult.mcpServers.map(name => (
+                          <span key={name} className="text-xs bg-muted/60 text-foreground px-2 py-0.5 rounded font-mono">
+                            {name}
+                          </span>
+                        ))}
+                      </div>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">—</span>
+                    )}
+                  </div>
+
+                  {/* Skills */}
+                  <div>
+                    <p className="text-xs text-muted-foreground mb-1 flex items-center gap-1">
+                      <Zap size={11} className="shrink-0" aria-hidden="true" />
+                      {p.customAgentSkillsLabel}
+                    </p>
+                    {detectResult?.skillNames && detectResult.skillNames.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {detectResult.skillNames.map(name => (
+                          <span key={name} className="text-xs bg-[var(--amber-dim)] text-[var(--amber-text,var(--foreground))] px-2 py-0.5 rounded font-mono">
+                            {name}
+                          </span>
+                        ))}
+                      </div>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">—</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Customize toggle */}
+              <button
+                type="button"
+                onClick={() => setCustomizeOpen(prev => !prev)}
+                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+              >
+                {customizeOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                {p.customAgentCustomize}
+              </button>
+
+              {/* Customize panel — CSS Grid expand */}
+              <div
+                className="grid transition-[grid-template-rows] duration-200 ease-out"
+                style={{ gridTemplateRows: customizeOpen ? '1fr' : '0fr' }}
+              >
+                <div className="overflow-hidden">
+                  <div className="rounded-xl border border-border/50 bg-card/50 p-5 space-y-4">
+                    {/* MCP Config Path */}
+                    <Field label={p.customAgentConfigPath}>
+                      <Input
+                        value={form.global}
+                        onChange={(e) => setField('global', e.target.value)}
+                        autoComplete="off"
+                      />
+                    </Field>
+
+                    {/* Config Key + Format */}
+                    <div className="grid grid-cols-2 gap-3">
+                      <Field label={p.customAgentConfigKey}>
+                        <Input
+                          value={form.configKey}
+                          onChange={(e) => setField('configKey', e.target.value)}
+                          autoComplete="off"
+                        />
+                      </Field>
+                      <Field label={p.customAgentFormat}>
+                        <div className="flex gap-2 pt-1">
+                          <RadioPill
+                            label="JSON"
+                            checked={form.format === 'json'}
+                            onChange={() => setField('format', 'json')}
+                            name="format"
+                          />
+                          <RadioPill
+                            label="TOML"
+                            checked={form.format === 'toml'}
+                            onChange={() => setField('format', 'toml')}
+                            name="format"
+                          />
+                        </div>
+                      </Field>
+                    </div>
+
+                    {/* Transport */}
+                    <Field label={p.customAgentTransport}>
+                      <div className="flex gap-2">
+                        <RadioPill
+                          label="stdio"
+                          checked={form.preferredTransport === 'stdio'}
+                          onChange={() => setField('preferredTransport', 'stdio')}
+                          name="transport"
+                        />
+                        <RadioPill
+                          label="http"
+                          checked={form.preferredTransport === 'http'}
+                          onChange={() => setField('preferredTransport', 'http')}
+                          name="transport"
+                        />
+                      </div>
+                    </Field>
+
+                    {/* Skills Directory */}
+                    <Field label={p.customAgentSkillDir} hint={p.customAgentSkillDirHint}>
+                      <Input
+                        value={form.skillDir}
+                        onChange={(e) => setField('skillDir', e.target.value)}
+                        placeholder={p.customAgentSkillDirPlaceholder}
+                        autoComplete="off"
+                      />
+                    </Field>
+
+                    {/* Project Config */}
+                    <Field label={p.customAgentProjectConfig}>
+                      <Input
+                        value={form.project}
+                        onChange={(e) => setField('project', e.target.value)}
+                        autoComplete="off"
+                      />
+                    </Field>
+
+                    {/* CLI Binary */}
+                    <Field label={p.customAgentCliBinary}>
+                      <Input
+                        value={form.presenceCli}
+                        onChange={(e) => setField('presenceCli', e.target.value)}
+                        placeholder={p.customAgentCliBinaryPlaceholder}
+                        autoComplete="off"
+                      />
+                    </Field>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Error Banner */}
+          {error && (
+            <div className="rounded-lg border border-[var(--error)]/30 bg-[var(--error)]/5 p-3 flex items-start gap-2">
+              <AlertCircle size={14} className="text-[var(--error)] mt-0.5 shrink-0" />
+              <p className="text-sm text-[var(--error)]">{error}</p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-2 px-5 pb-5 pt-1">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 min-h-[36px] text-sm rounded-lg border border-border hover:bg-muted cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {p.customAgentCancel}
+          </button>
+
+          {phase === 'input' ? (
+            <button
+              type="button"
+              onClick={handleContinue}
+              disabled={!canContinue || detecting}
+              className="px-4 min-h-[36px] text-sm rounded-lg bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring flex items-center gap-2"
+            >
+              {detecting ? (
+                <>
+                  <Loader2 size={14} className="animate-spin" />
+                  {p.customAgentDetecting}
+                </>
+              ) : (
+                <>
+                  {p.customAgentContinue}
+                  <ChevronRight size={14} />
+                </>
+              )}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving}
+              className="px-4 min-h-[36px] text-sm rounded-lg bg-[var(--amber)] text-[var(--amber-foreground)] hover:bg-[var(--amber)]/90 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring flex items-center gap-2"
+            >
+              {saving ? (
+                <>
+                  <Loader2 size={14} className="animate-spin" />
+                  {isEdit ? p.customAgentSaving : p.customAgentAdding}
+                </>
+              ) : error ? (
+                p.customAgentRetry
+              ) : isEdit ? (
+                p.customAgentSave
+              ) : (
+                p.customAgentAdd
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Radio Pill (inline sub-component) ─── */
+
+function RadioPill({
+  label,
+  checked,
+  onChange,
+  name,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: () => void;
+  name: string;
+}) {
+  return (
+    <label
+      className={`px-3 py-1.5 text-sm rounded-md border cursor-pointer transition-all duration-150 select-none ${
+        checked
+          ? 'border-[var(--amber)]/40 bg-[var(--amber-dim)] text-foreground font-medium'
+          : 'border-border bg-background text-muted-foreground hover:bg-muted'
+      }`}
+    >
+      <input
+        type="radio"
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        className="sr-only"
+      />
+      {label}
+    </label>
+  );
+}