c7d2e35ea6
- Nouveau composant SettingsHelpBox (accordéon bleu, étapes numérotées) - Intégrations: aide Google Calendar + aide Readwise (inline, avant les boutons) - MCP: explication de ce qu'est MCP et comment l'utiliser - IA: explication des fournisseurs, BYOK, Ollama, quotas - Données: explication import/export/ré-indexation/suppression compte Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { HelpCircle, ChevronDown, ChevronUp, ExternalLink } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface HelpStep {
|
|
icon?: string
|
|
text: string
|
|
link?: { label: string; href: string }
|
|
}
|
|
|
|
interface SettingsHelpBoxProps {
|
|
title: string
|
|
steps: HelpStep[]
|
|
defaultOpen?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function SettingsHelpBox({ title, steps, defaultOpen = false, className }: SettingsHelpBoxProps) {
|
|
const [open, setOpen] = useState(defaultOpen)
|
|
|
|
return (
|
|
<div className={cn('rounded-xl border border-blue-200/60 dark:border-blue-800/30 bg-blue-50/50 dark:bg-blue-950/10 overflow-hidden', className)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-blue-100/40 dark:hover:bg-blue-900/10 transition-colors"
|
|
>
|
|
<HelpCircle size={14} className="text-blue-500 dark:text-blue-400 shrink-0" />
|
|
<span className="text-[12px] font-semibold text-blue-700 dark:text-blue-300 flex-1">{title}</span>
|
|
{open ? (
|
|
<ChevronUp size={13} className="text-blue-400 shrink-0" />
|
|
) : (
|
|
<ChevronDown size={13} className="text-blue-400 shrink-0" />
|
|
)}
|
|
</button>
|
|
|
|
{open && (
|
|
<ol className="px-4 pb-4 space-y-2">
|
|
{steps.map((step, i) => (
|
|
<li key={i} className="flex items-start gap-2.5">
|
|
<span className="w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300 text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">
|
|
{step.icon ?? i + 1}
|
|
</span>
|
|
<span className="text-[12px] text-blue-800 dark:text-blue-200 leading-relaxed">
|
|
{step.text}
|
|
{step.link && (
|
|
<>
|
|
{' '}
|
|
<a
|
|
href={step.link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-0.5 underline underline-offset-2 font-medium hover:text-blue-600"
|
|
>
|
|
{step.link.label}
|
|
<ExternalLink size={10} />
|
|
</a>
|
|
</>
|
|
)}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|