35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
interface QueryHistoryPanelProps {
|
|
history: string[]
|
|
onInsert: (query: string) => void
|
|
onClear: () => void
|
|
}
|
|
|
|
export function QueryHistoryPanel({ history, onInsert, onClear }: QueryHistoryPanelProps) {
|
|
return (
|
|
<div className="space-y-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-slate-200">Recent queries</h3>
|
|
<button onClick={onClear} className="text-xs text-slate-400 hover:text-slate-200">
|
|
Clear
|
|
</button>
|
|
</div>
|
|
{history.length === 0 ? (
|
|
<p className="text-xs text-slate-500">Run queries to build a local history.</p>
|
|
) : (
|
|
<ul className="space-y-2 text-xs text-slate-300">
|
|
{history.map((item, index) => (
|
|
<li key={`${item}-${index}`} className="rounded-xl border border-slate-800 bg-slate-950/60 p-3">
|
|
<code className="block whitespace-pre-wrap break-all text-slate-200">{item}</code>
|
|
<button onClick={() => onInsert(item)} className="mt-2 text-[11px] font-medium text-emerald-300">
|
|
Insert into builder
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|